admin管理员组

文章数量:1023738

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).

Using $('#my-select').select2('data', {}) (or $('#my-select').select2('data', null)) is not yielding the desired result and getting the error:

Error: Option 'data' is not allowed for Select2 when attached to a element.

Is there an efficient solution for that?

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).

Using $('#my-select').select2('data', {}) (or $('#my-select').select2('data', null)) is not yielding the desired result and getting the error:

Error: Option 'data' is not allowed for Select2 when attached to a element.

Is there an efficient solution for that?

  • javascript
  • jquery-plugins
  • jquery-select2
Share Improve this question edited Apr 3, 2013 at 12:36 Alban Dericbourg asked Apr 3, 2013 at 12:25 Alban DericbourgAlban Dericbourg 1,6343 gold badges18 silver badges39 bronze badges 3
  • can u paste the plete code, without knowing the exact structure of the page, its not possible to say anything :( – dreamweiver Commented Apr 3, 2013 at 12:38
  • My question is more on the Select2 API: the problem does not depend on the page structure. But I can make an exemple if you want. – Alban Dericbourg Commented Apr 3, 2013 at 12:43
  • 1 I understood the problem, but i got confused by the inputs u have given in your question. initially u said u tried $('#my-select').empty() , and later $('#my-select').select2('data', {}) ,so i need to know, is my-select the id of your dropdown or its just a parent tag of your target dropdown ? – dreamweiver Commented Apr 3, 2013 at 13:07
Add a ment  | 

2 Answers 2

Reset to default 1

In Select2 v3.4.1, I removed the Li elements from UL but only the "select2-search-choice" tags:

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

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>).

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>

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).

Using $('#my-select').select2('data', {}) (or $('#my-select').select2('data', null)) is not yielding the desired result and getting the error:

Error: Option 'data' is not allowed for Select2 when attached to a element.

Is there an efficient solution for that?

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).

Using $('#my-select').select2('data', {}) (or $('#my-select').select2('data', null)) is not yielding the desired result and getting the error:

Error: Option 'data' is not allowed for Select2 when attached to a element.

Is there an efficient solution for that?

  • javascript
  • jquery-plugins
  • jquery-select2
Share Improve this question edited Apr 3, 2013 at 12:36 Alban Dericbourg asked Apr 3, 2013 at 12:25 Alban DericbourgAlban Dericbourg 1,6343 gold badges18 silver badges39 bronze badges 3
  • can u paste the plete code, without knowing the exact structure of the page, its not possible to say anything :( – dreamweiver Commented Apr 3, 2013 at 12:38
  • My question is more on the Select2 API: the problem does not depend on the page structure. But I can make an exemple if you want. – Alban Dericbourg Commented Apr 3, 2013 at 12:43
  • 1 I understood the problem, but i got confused by the inputs u have given in your question. initially u said u tried $('#my-select').empty() , and later $('#my-select').select2('data', {}) ,so i need to know, is my-select the id of your dropdown or its just a parent tag of your target dropdown ? – dreamweiver Commented Apr 3, 2013 at 13:07
Add a ment  | 

2 Answers 2

Reset to default 1

In Select2 v3.4.1, I removed the Li elements from UL but only the "select2-search-choice" tags:

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

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>).

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>

本文标签： javascriptjQuery Select2 plugin resetStack Overflow

版权声明：本文标题：javascript - jQuery Select2 plugin: reset - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745539729a2155127.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。