build conditional select with codeigniter form helpers - php

Question

I am trying to create two dropdown lists with the condition, that the second one should show the list based on the value, selected in the first one.
1st is city.
2nd is district within the city.
Both lists are populated from the database.
Here is an example
<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 should be reloaded and list selection updated after city value is changed.
Which approach should I use?

Answer 1

Using ajax you could populate the second dropdown based on the value of the first. Would look something like that:
$("#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>");
});
});
});

Answer 2

Select2 supports methods that allow programmatic control of the component.
// 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");
});
You can also add options like this:
$('.select2').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
3rd Edit:
As you mention in your question that you need to select the option on the select dropdown to depend on the first dropdown selected option.
Here is the Two select box which changes the option depending on the first select box.
$("#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>