依赖于 codeigniter 的下拉列表

Question

我有两个可以正常工作的下拉列表。一个是ciudades，另一个是comunas，问题是我需要comunas 列表依赖于ciudades，例如，当从列表中选择一个ciudad 时，我加载与所选ciudad 的id 关联的comunas。这是我的代码！    <!-- language: lang-or-tag-here -->    <label>Ciudad:</label><select class="form-control" name="idCiudad" required autocomplete="off">  <option value="">Seleccione</option>    <?php foreach($listaciudades as $ciudad):?>        <option value="<?= $ciudad['idciudad']?>"            <?php if ($idCiudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>        >            <?= $ciudad['nombre']?>        </option>    <?php endforeach; ?></select>    <label>Comuna:</label><select class="form-control" name="idComuna" required autocomplete="off">  <option value="">Seleccione</option>    <?php foreach($listacomunas as $comuna):?>        <option value="<?= $comuna['idcomuna']?>"            <?php if ($idComuna == $comuna['idcomuna']) : ?> selected<?php endif; ?>        >            <?= $comuna['nombre']?>        </option>    <?php endforeach; ?></select>

Answer 1

我在这种情况下使用 ajax。

  <select  id="Firstclass" required>

      <option value='1'>value1</option>

      <option value='2'>value2</option>

  </select>

 <select id="Secondclass" required>

      <option></option>

  </select>

查询代码

$(document).on('change', '#Firstclass', function() {

    var val= $(this).val();

  $.ajax({

    url:  base_url+'Request/secondClass',

    method: 'post',

    data: {val: val},

    dataType: 'json',

    success: function(responseData) {

      $('#Secondclass').empty();

      $.each(responseData, function(i, p) {

        $('#Secondclass').append($('<option></option>').val(p.val_ID).html(p.val_NAME));

      });

    },

  });

});

服务器端

 public function secondClass(){

$val=$this->input->post('val');

$secondClass=$this->RequestModel->getClass($val);

if($secondClass){

  $secondClass=json_encode($secondClass);

  print_r($secondClass);

}else {

  echo 0 ;

}

Answer 2

你不能只用 CI 做到这一点，我们可以在 jquery ajax 的帮助下实现，

看法

    <!-- language: lang-or-tag-here -->

        <label>Ciudad:</label><select class="form-control" name="idCiudad" id="idCiudad" required autocomplete="off">

      <option value="">Seleccione</option>

        <?php foreach($listaciudades as $ciudad):?>

            <option value="<?= $ciudad['idciudad']?>"

                <?php if ($idCiudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>

            >

                <?= $ciudad['nombre']?>

            </option>

        <?php endforeach; ?>

    </select> 

       <label>Comuna:</label>

<select class="form-control" name="idComuna" id="idComuna" required autocomplete="off">

      <option value="">Seleccione</option>

    </select>

在您的控制器上创建一个新功能

<?php 

class your_controller{

 //other codes

public function ajax_communas(){

//your code to fetch comunas

 $data = array();

    $ciudades_id = $this->input->post('ciudades_id');

    if($country_id){

        $data = $this->model_name->function_name_to_get_cammuna_via_ciudades_id($ciudades_id);

    }

echo json_encode($data);

}

在模型上

function function_name_to_get_cammuna_via_ciudades_id($id){

        $this->db->select('table_name.id, table_name.name');

        $this->db->where("parent_id",$id);    

        $query = $this->db->get();

        $result = ($query->num_rows() > 0)?$query->result_array():FALSE;

        return $result;

    }

在您的视图/js 文件中添加 jquery ajax 代码

$('#idCiudad').on('change',function(){

        var idCiudad = $(this).val();

        if(idCiudad){

            $.ajax({

                type:'POST',

                url:'<?php echo base_url('controller/ajax_communas'); ?>',

                data:'ciudades_id='+idCiudad,

                success:function(data){

                    $('#idComuna').html('<option value="">Selecionee</option>'); 

                    var dataObj = jQuery.parseJSON(data);

                    if(dataObj){

                        $(dataObj).each(function(){

                            var option = $('<option />');

                            option.attr('value', this.id).text(this.name);           

                            $('#idComuna').append(option);

                        });

                    }else{

                        //incase no data

                        $('#idComuna').html('<option value="">Not available</option>');

                    }

                }

            }); 

        }else{

            $('#idComuna').html('<option value="">Selcionee(or select one)</option>'); 

        }

    });