codeigniterフォームヘルパーを使用して条件選択を行う

Question

条件付きの2つのドロップダウンリストを作成しようとしています。最初のもので選択した値に基づいてリストを表示する必要があります。 1番目は都市です。 2番街は市の中の地区です。 両方のリストはデータベースから読み込まれます。

はここ

<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 = $（ ".js-example-programmatic"）。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'}); 

第三の編集オプション。 最初の選択ボックスに応じてオプションを変更する2つの選択ボックスがあります。

             
  
 
   
 
    
$("#select1").change(function() { 
 
    if ($(this).data('options') === undefined) { 
 
\t /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
 
\t $(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を使用すると、最初の値に基づいて2番目のドロップダウンを設定できます。

$("#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>"); 
       }); 
      }); 
});