Question

我希望能够重置（即空值并将占位符设置为“新鲜”） Select2 下拉列表。更确切地说，我有依赖的下拉和清除应该清除依赖的下拉。

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

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

使用$('#my-select').select2('data', {})（或$('#my-select').select2('data', null)）并未产生预期结果并收到错误：

错误：当附加到a时，Select2不允许使用选项'data' 元件。

是否有一个有效的解决方案？

Answer 1

嗯......

从某种意义上说，它正在研究一个最小的例子（见下文）。在这个例子中，第二个选择不会在重置时恢复它的占位符（假设它几乎正常工作）。这意味着我正在处理的遗留代码在某处出现问题（鉴于错误，我猜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>

Answer 2

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

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

jQuery Select2插件：重置

2 个答案: