jQuery Select2插件：重置

Question

I'd like to be able to reset ( ie empty values and setting placeholder like on a "fresh" one) a Select2 dropdown. 我希望能够重置（即空值，并设置占位符像一个“新鲜”之一）一个选择二下拉。 To be more precise, I have dependant dropdowns and clearing one should clear the depending ones. 更确切地说，我有从属下拉列表，清除其中一个应清除从属下拉列表。

As an example, I could have country, region and city: clearing country should clear region and city. 例如，我可以有国家，地区和城市：清算国家应该清除地区和城市。

I tried several things but never was able to programmatically trigger the clear. 我尝试了几件事，但从未能够以编程方式触发清除。 The most obvious one was $('#my-select').empty() but the placeholder is not re-set and the selected value remains (even if it is not displayed). 最明显的一个是$('#my-select').empty()但不重置占位符，并且保留所选值（即使未显示）。

Using $('#my-select').select2('data', {}) (or $('#my-select').select2('data', null) ) is not yielding the desired result and getting the error: 使用$('#my-select').select2('data', {}) （或$('#my-select').select2('data', null) ）不会产生所需的结果并得到错误：

Error: Option 'data' is not allowed for Select2 when attached to a element. 错误：附加到元素时，Select2不允许使用选项“数据”。

Is there an efficient solution for that? 有没有有效的解决方案？

Answer 1

Well... 好...

It a way, it is working on a minimal example (see below). 通过某种方式，它正在研究一个最小的示例（请参见下文）。 On this example, the second select does not recover it's placeholder on reset (let's say it is almost working). 在此示例中，第二个选择在重置时不会恢复其占位符（假设它几乎可以正常工作）。 It means the legacy code I'm working on has an issue somewhere (given the error, I guess the JSP tag generates a <select> ). 这意味着我正在处理的旧代码在某个地方有问题（考虑到错误，我猜JSP标记会生成<select> ）。

The issue does not seem to be where I was looking for. 这个问题似乎不是我要找的地方。

So here is the solution (but not the solution to my real issue). 所以这是解决方案（但不是我真正问题的解决方案）。

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

Answer 2

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

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

jQuery Select2插件：重置

问题描述

2 个解决方案

解决方案1
1 2013-04-03 13:20:40

解决方案2
1 已采纳 2013-07-19 13:05:24

jQuery Select2插件：重置

问题描述

2 个解决方案

解决方案1 1 2013-04-03 13:20:40

解决方案2 1 已采纳 2013-07-19 13:05:24

解决方案1
1 2013-04-03 13:20:40

解决方案2
1 已采纳 2013-07-19 13:05:24