Chained Dynamic Dropdown list using Codeigniter

[amrak]

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.

[amrak]

Sorry since I am posting in this forum for the first time the codes for my controller and view are mixed. I'll repost the codes here. My apologies.

//controller/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'),
                        ),
                    'Dagana' =>array(
                        'Dagapela'=>array('meog','teog'),
                    )
                );


//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>
                    <div class="form-group">
                        <label class="control-label" for="Village">Village:</label>
                        <select class="form-control input-lg" id="village">
                            <option value=''>Select</option>
                        </select>
                    </div>
                </div>