Selectize.js Dependent Dropdowns For Country And City

Hi Guys,

I was working with selectize.js and a problem occurred when i was using select/dropdown list, I was working in PhP. Here is the code for country dropdown which successfully loads city on selecting country from country dropdown.

<div class="form-group mb10">

        <div class="row">

            <div class="col-sm-6 mb5">

                <label class="control-label">Country</label>

                <div class="has-icon pull-right">

                    <?php echo CHtml::dropDownList('ClientProjects[country]','',CHtml::listData(States::model()->findAll(array('order'=>'name ASC')),'id', 'name'),array('class'=>"form-control pr10",'prompt' =>'Select Country','id'=>"country",'ajax'=>array(

'type'=>'POST',

'url' => CController::createUrl('/globaldata/getCity'),

'data'=> array('country'=>'js:this.value'),

'success'=>'function(data){loadcity1(data);}'

)

));?>

                 </div>

            </div>



<div class="col-sm-6 mb5">

                <label class="control-label">City</label>

                <div class="has-icon pull-right">

                    <?php echo CHtml::dropDownList('ClientProjects[cities_id]','',CHtml::listData(Cities::model()->findAllByAttributes(array('id'=>1)),'id', 'name'),array('class'=>"form-control pr10",'prompt' =>'Select City','id'=>"city"));?>

                </div>

            </div>

<script type="text/javascript">

function city1(data)

{

    $("#city").html(data);

    var selectJson = {};

    selectJson = new Array();

    var select = document.getElementById("city");

    for(var i = 0; i < select.options.length; i++)

    {

        var option = select.options[i];

        var optionJson = {};

        optionJson = {value: option.value, name: option.text};

        console.log(optionJson);

        selectJson.push(optionJson);

    }
  

    $selectstate = $('#country').selectize();

        select_city.disable();

        select_city.clearOptions();

        select_city.load(function(callback) {

          

        select_city.enable();

        callback(selectJson);

          

    });

}

$selectcity = $('#city').selectize({

    valueField: 'name',

    labelField: 'name',

    searchField: ['name'],

    selectOnTab:true

});

select_city  = $selectcity[0].selectize;

select_state = $selectstate[0].selectize;

select_city.disable();

</script>

Thanks

Ritesh