依赖于 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>'); 
        }
    });