Question

我正在使用counties.js形式here并使用select-2插件进行下拉。

从国家/地区下拉菜单中选择国家/地区的代码

<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

我认为你对主要选择（在图形select2后面）做的事情不会影响select2用户界面。

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

使用此：

$("#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

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

2 个答案: