javascript - 使用 select-2 插件进行编辑时国家/地区下拉列表不起作用

标签 javascript php jquery jquery-select2

我正在使用 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>

一切正常,并且当国家/地区发生变化时,其各自的州将填充在州下拉列表中。但是状态下拉列表中的显示文本保持不变,即使该状态不存在,直到没有手动更改为其他文本。

理想情况下,国家/地区更改后,州列表应更改为默认选择。

提前谢谢大家。等待回应...

最佳答案

我认为您对主选择(在图形 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>

关于javascript - 使用 select-2 插件进行编辑时国家/地区下拉列表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24694081/

相关文章:

javascript - 这是受控还是不受控的 React 组件?

javascript - 带有传递变量的 jQuery $.post 失败

phpcs:缺少参数注释

php - 为什么ezSQL返回空结果集

javascript - JQuery onclick 属性在each() 循环中未定义

javascript - Bootstrap 选择的 knockout 自定义绑定(bind)不更新 View 模型 "selectedCategories/selectedCategory"

javascript - 当根节点传递给它时,d3 TreeMap 布局是否被缓存?

php - 数组来自数据库

javascript - 将文本插入光标位置的文本区域时出现 IE 问题

Jquery Keyup 与 Contains 隐藏 Span