Question

我正在尝试使用条件创建两个下拉列表，第二个应该根据在第一个中选择的值显示列表。第一是城市。第二个是城市内的区。两个列表都是从数据库中填充的。

这是一个例子

<td>City:</td>
<td>
    <?=form_dropdown('contact_city', $sel_city, set_value('contact_city'), "class='select2'"); ?>
</td>
<td>District:</td>
<td >
   <?=form_dropdown('contact_district', $sel_contact_district, set_value('contact_district'),"class='select2'"); ?>
</td>

在城市价值发生变化后，应重新加载$ sel_contact_district并更新列表选择。

我应该使用哪种方法？

Answer 1

Select2支持允许以编程方式控制组件的方法。

// var $ example = $（＆＃34; .js-example-programmatic＆＃34;）。select2（）;

$('body').on('click', '.select2', function(e) {   
    //var select_name = $(this).attr("your_select2_name");
    $(this).val("your_option").trigger("change"); 
});

您还可以添加以下选项：

$('.select2').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

第三编辑：正如您在问题中提到的那样，您需要在选择下拉列表中选择选项，以取决于第一个下拉选择选项。这是两个选择框，它根据第一个选择框更改选项。



$("#select1").change(function() {
  if ($(this).data('options') === undefined) {
	/*Taking an array of all options-2 and kind of embedding it on the select1*/
	$(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>


<select name="select2" id="select2">
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM<option>
</select>

Answer 2

使用ajax，您可以根据第一个下拉列表的值填充第二个下拉列表。看起来像这样：

$("#cityDropdown").on('change', function(){
    $.post('api/listdistrictsfromcity',
           { city_id : $(this).val() },
           function(response){
               var $district_dropdown = $("#districtsDropdown").empty();   
               $.each(response, function(i, item){
                    $district_dropdown.append("<option value='" + item.value + "'>"+ item.text +"</option>");
               });
           });
});

使用codeigniter表单助手构建条件选择

2 个答案: