jQuery Select2 插件：重置答案

【问题标题】：jQuery Select2 plugin: resetjQuery Select2 插件：重置
【发布时间】：2013-04-03 12:25:20
【问题描述】：

我希望能够重置（ie 空值和设置占位符，就像在“新”上一样）Select2 下拉菜单。更准确地说，我有依赖下拉菜单，清除一个应该清除依赖下拉菜单。

例如，我可以有国家、地区和城市：清除国家应该清除地区和城市。

我尝试了几件事，但始终无法以编程方式触发清除。最明显的一个是$('#my-select').empty()，但占位符没有被重新设置，选择的值仍然存在（即使它没有显示）。

使用$('#my-select').select2('data', {})（或$('#my-select').select2('data', null)）不会产生预期的结果并出现错误：

错误：当 Select2 附加到元素。

有没有有效的解决方案？

【问题讨论】：

你能不能把完整的代码贴出来，不知道页面的具体结构，不能说什么:(
我的问题更多是关于 Select2 API：问题不取决于页面结构。但如果你愿意，我可以举个例子。
我理解这个问题，但我对你在你的问题中给出的输入感到困惑。最初你说你试过$('#my-select').empty() ，后来$('#my-select').select2('data', {}) ，所以我需要知道，my-select是你的下拉列表的id还是它只是你的目标下拉列表的父标签？跨度>

标签： javascript jquery-plugins jquery-select2

【解决方案1】：

在 Select2 v3.4.1 中，我从 UL 中删除了 Li 元素，但只删除了“select2-search-choice”标签：

$('.select2-search-choice').remove();

【讨论】：

【解决方案2】：

嗯……

这是一种方式，它正在处理一个最小的示例（见下文）。在此示例中，第二个选择不会在重置时恢复它的占位符（假设它几乎可以工作）。这意味着我正在处理的遗留代码在某处存在问题（鉴于错误，我猜 JSP 标记会生成 <select>）。

问题似乎不是我要找的地方。

所以这是解决方案（但不是我真正问题的解决方案）。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Select2 example</title>
    <link href="select2-release-3.2/select2.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>

    <fieldset>
        <legend>Example</legend>

        <label for="first-select">First</label>
        <input id="first-select" />

        <label for="second-select">Second (depends on first)</label>
        <input id="second-select" />

    </fieldset>

    <script src="jquery-1.9.1.min.js"></script>
    <script src="select2-release-3.2/select2.js"></script>

    <script type="text/javascript">
        $(function() {

            var secondData = [{id:0,text:'1'},{id:1,text:'2'},{id:2,text:'3'},{id:3,text:'4'}];

            $(document).ready(function() {
                // Init first dropdown.
                $('#first-select').select2({
                    allowClear: true, 
                    placeholder: 'Select a value',
                    data: [{id:0,text:'A'},{id:1,text:'B'},{id:2,text:'C'},{id:3,text:'D'},{id:4,text:'E'}]
                });

                // Init second dropdown.
                $('#second-select').select2({
                    allowClear: true, 
                    placeholder: 'Select a value',
                    data: {}
                });
            });

            $(document).on('change', '#first-select', function() {
                if ($(this).val() == "") {
                    // Clear second
                    $('#second-select').select2({
                        allowClear: true, 
                        placeholder: 'Select a value',
                        data: {}
                    });
                } else {
                    // Fill second
                    $('#second-select').select2({data: secondData});
                }
            });
        });
    </script>

</body>
</html>

【讨论】：