依赖于 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。&nbsp; <select&nbsp; id="Firstclass" required>&nbsp; &nbsp; &nbsp; <option value='1'>value1</option>&nbsp; &nbsp; &nbsp; <option value='2'>value2</option>&nbsp; </select>&nbsp;<select id="Secondclass" required>&nbsp; &nbsp; &nbsp; <option></option>&nbsp; </select>查询代码$(document).on('change', '#Firstclass', function() {&nbsp; &nbsp; var val= $(this).val();&nbsp; $.ajax({&nbsp; &nbsp; url:&nbsp; base_url+'Request/secondClass',&nbsp; &nbsp; method: 'post',&nbsp; &nbsp; data: {val: val},&nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; success: function(responseData) {&nbsp; &nbsp; &nbsp; $('#Secondclass').empty();&nbsp; &nbsp; &nbsp; $.each(responseData, function(i, p) {&nbsp; &nbsp; &nbsp; &nbsp; $('#Secondclass').append($('<option></option>').val(p.val_ID).html(p.val_NAME));&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; });});服务器端&nbsp;public function secondClass(){$val=$this->input->post('val');$secondClass=$this->RequestModel->getClass($val);if($secondClass){&nbsp; $secondClass=json_encode($secondClass);&nbsp; print_r($secondClass);}else {&nbsp; echo 0 ;}

Answer 2

你不能只用 CI 做到这一点，我们可以在 jquery ajax 的帮助下实现，看法&nbsp; &nbsp; <!-- language: lang-or-tag-here -->&nbsp; &nbsp; &nbsp; &nbsp; <label>Ciudad:</label><select class="form-control" name="idCiudad" id="idCiudad" required autocomplete="off">&nbsp; &nbsp; &nbsp; <option value="">Seleccione</option>&nbsp; &nbsp; &nbsp; &nbsp; <?php foreach($listaciudades as $ciudad):?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="<?= $ciudad['idciudad']?>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if ($idCiudad == $ciudad['idciudad']) : ?> selected<?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?= $ciudad['nombre']?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; &nbsp; &nbsp; <?php endforeach; ?>&nbsp; &nbsp; </select>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<label>Comuna:</label><select class="form-control" name="idComuna" id="idComuna" required autocomplete="off">&nbsp; &nbsp; &nbsp; <option value="">Seleccione</option>&nbsp; &nbsp; </select>在您的控制器上创建一个新功能<?php&nbsp;class your_controller{&nbsp;//other codespublic function ajax_communas(){//your code to fetch comunas&nbsp;$data = array();&nbsp; &nbsp; $ciudades_id = $this->input->post('ciudades_id');&nbsp; &nbsp; if($country_id){&nbsp; &nbsp; &nbsp; &nbsp; $data = $this->model_name->function_name_to_get_cammuna_via_ciudades_id($ciudades_id);&nbsp; &nbsp; }echo json_encode($data);}在模型上function function_name_to_get_cammuna_via_ciudades_id($id){&nbsp; &nbsp; &nbsp; &nbsp; $this->db->select('table_name.id, table_name.name');&nbsp; &nbsp; &nbsp; &nbsp; $this->db->where("parent_id",$id);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $query = $this->db->get();&nbsp; &nbsp; &nbsp; &nbsp; $result = ($query->num_rows() > 0)?$query->result_array():FALSE;&nbsp; &nbsp; &nbsp; &nbsp; return $result;&nbsp; &nbsp; }在您的视图/js 文件中添加 jquery ajax 代码$('#idCiudad').on('change',function(){&nbsp; &nbsp; &nbsp; &nbsp; var idCiudad = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; if(idCiudad){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:'<?php echo base_url('controller/ajax_communas'); ?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:'ciudades_id='+idCiudad,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#idComuna').html('<option value="">Selecionee</option>');&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dataObj = jQuery.parseJSON(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(dataObj){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(dataObj).each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var option = $('<option />');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; option.attr('value', this.id).text(this.name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#idComuna').append(option);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //incase no data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#idComuna').html('<option value="">Not available</option>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#idComuna').html('<option value="">Selcionee(or select one)</option>');&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });