首页 文章

jQuery Select2插件:重置

提问于
浏览
1

我希望能够重置(即清空值并在"fresh"上设置占位符)一个Select2下拉列表 . 更确切地说,我有依赖的下拉和清除应该清除依赖的下拉 .

举个例子,我可以有国家,地区和城市:清算国家应该清楚地区和城市 .

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

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

错误:附加到元素时,Select2不允许选项'data' .

有效的解决方案吗?

2 回答

  • 1

    好...

    它是一种方式,它正在研究一个最小的例子(见下文) . 在这个例子中,第二个选择没有恢复它's placeholder on reset (let' s说它几乎正常工作) . 这意味着我正在处理的遗留代码在某处出现问题(鉴于错误,我猜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>
    
  • 1

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

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

相关问题