jQuery Select2 plugin: reset

jQuery Select2 plugin: reset

本文关键字：reset plugin Select2 jQuery      更新时间：2023-09-26

我希望能够重置(即空值和设置占位符就像一个"新鲜"的)一个选择下拉菜单。更准确地说，我有依赖的下拉菜单，清除一个应该清除依赖的。

作为一个例子，我可以有国家，地区和城市:清除国家应该清除地区和城市。

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

使用$('#my-select').select2('data', {})(或$('#my-select').select2('data', null))不会产生期望的结果，并得到错误:

错误:选项'data'是不允许的，当附加到一个

元素。

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

在Select2 v3.4.1中，我从UL中删除了Li元素，但只删除了" Select2 -search-choice"标记:

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

嗯…

在某种程度上，它在一个最小的例子上工作(见下文)。在这个例子中，第二次选择在重置时不会恢复它的占位符(假设它几乎可以工作)。这意味着我正在处理的遗留代码在某个地方有问题(给定错误，我猜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>
相关文章：