Hi all, I am trying to create a multiple drop down list in my codeigniter project with the following hierarchy Dzongkhag(District)->Geog(Town) ->village. I am unable to get any display in the town and village drop down list. The following are the snippets from my project.
//controllers/form.php
$data['dzongkhags'] = array(
'Bumtang' => array(
'Chumi' => array('ala', 'atsa'),
'Ura' => array('ala','atsa','apaw'),
),
'Chukha' => array(
'Phuntsholing' => array('dekiline','pekiline','dangerline'),
'Wangkha'=> array('mangkha','pangkha','dangkha'),
//view/form.php
<div>
<div class="form-group">
<label class="control-label" for="Dzongkhag">Dzongkhag:</label>
<select class="form-control input-lg" id="dzongkhag">
<option value=''>Select</option>
<?php foreach ($dzongkhags as $dzongkhag => $geogs) { ?>
<option data geogs='<?= json_encode($geogs); ?>'><?= $dzongkhag ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label class="control-label" for="Geogs">Geog:</label>
<select class="form-control input-lg" id="geog">
<option value=''>Select</option>
</select>
</div>
),
'Dagana' =>array(
'Dagapela'=>array('meog','teog'),
)
);
//js/dropdown.js
$(document).ready(function() {
$("#dzongkhag").change(function() {
$("#geog, #village").html("<option value=''>Select</option>");
var geogs = $('option:selected', this).data('geogs');
$.each(geogs, function(k, v) {
$("#geog").append("<option data-villages='" + JSON.stringify(v) + "'>" + k + "</option>");
});
$("#geog").change(function() {
var villages = $('option:selected', this).data('villages');
$.each(villages, function(k, v) {
$("#village").append("<option>" + v + "</option>");
});
});
});
});
The result I get in the browser is just the list from the district(dzongkhat) but I do not get any list or values in my other two dropdown list, Where did I go wrong in my code. Will be grateful if someone could kindly help me solve the issues.