使用select-2插件进行编辑时，国家/地区下拉菜单不起作用

Question

我正在使用counties.js表单here，并使用select-2插件作为下拉列表。

从country下拉列表中选择country的代码

<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>

默认选择状态的代码如下

<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>

​

当国家/地区发生变化时，其各自的状态也应该发生变化，因为编写了以下脚本

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

一切都运行得很好，当国家发生变化时，它各自的状态就会被填充到状态下拉列表中。但是，即使该状态不存在，在状态下拉菜单中显示的文本仍然保持不变，直到不手动更改为某些其他文本。

理想情况下，一旦更改了国家，状态列表就应该更改为默认选择。

提前感谢大家。正在等待响应...

Answer 1

我认为您对主select (在图形select2后面)所做的操作不会影响select2用户界面。

实际上，您必须使用插件本身来更改select的值。

使用以下命令：

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

工作代码：

<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>

Answer 2

试一试，这可以帮助你，只要做一点努力https://rubygems.org/gems/country_state_select