使用select-2插件进行编辑时，country state下拉不起作用

I am using counties.js form here and using select-2 plugin for drop down.

code for selecting country from the country drop down

<select class="select2 dep" name="country" id="country_list">
    <optgroup label="Country">
    <option value="">Select Country</option>
    <script src="<?=base_url()?>assets/js/countries_states.js"></script>
    <script language="javascript">
        populateCountries("country_list");
        var country_select  =   document.getElementsByName('country');

        for(var m=0;m<country_select[0].options.length;m++)
        {
            if(country_select[0].options[m].value == '<?=$bhandar_details[0]['country']?>')
            {
                    country_select[0].options[m].setAttribute("selected","true");
            }
        }
    </script>
    </optgroup>
</select>

and the code for default selection of states is as follows

<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
    <option value="">Select State</option>
    <script language="javascript">
        populateStates("country_list", "state_list");

        var state_select    =   document.getElementsByName('state');
        for(var m=0;m<state_select[0].options.length;m++)
        {
            if(state_select[0].options[m].value == '<?=$bhandar_details[0]['state']?>')
            {
                state_select[0].options[m].setAttribute("selected","true");
            }
        }

    </script>
</optgroup>

when the country is changed its respective states should change for that following script is written

<script type="text/javascript">
    $( "#country_list" ).change(function() {
        populateStates("country_list", "state_list");
    });
</script>

everything works well and fine and when country is changed its respective states are populated in the state drop down. but the display text in state dropdown remains the same even though that state doesnot exists, until not changed manually to some other text.

Ideally as soon as country is changed the state list should change to default selection.

thank you all in advance. waiting for response...

I think what you do to the main select (behind the graphical select2) does not affect the select2 user interface.

In fact, you have to change the value of your select using the plugin itself.

Use this:

$("#state_list").select2().val(0); // any value you like

Working code:

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
<script src="js/countries_states.js"></script>
<link href="css/select2.css" rel="stylesheet"/>

<select class="select2 dep" name="country" id="country_list"  style="width: 260px;">
    <optgroup label="Country">
    <option value="">Select Country</option>
    </optgroup>
</select>

<select class="select2 dep" name="state" id="state_list">
<optgroup label="State">
    <option value="">Select State</option>
</optgroup>


<script type="text/javascript">
    $( "#country_list" ).change(function() {
        populateStates("country_list", "state_list");
        $("#state_list").select2().val(0); //----- added this code
    });

    $(document).ready(function() {
        populateCountries("country_list", "state_list");
        $("#country_list").select2();
        $("#state_list").select2(); 
    });
</script>

Try this this can help you by just doing a small effort https://rubygems.org/gems/country_state_select