使用重置按钮重置下拉列表中的Select2值

What would be the best way to reset the selected item to default? I'm using Select2 library and when using a normal button type="reset", the value in the dropdown doesn't reset.

将所选项目重置为默认值的最佳方法是什么？我正在使用Select2库，当使用普通按钮类型=“重置”时，下拉列表中的值不会重置。

So when I press my button I want "All" to be shown again.

因此，当我按下我的按钮时，我希望再次显示“全部”。

jQuery

jQuery的

$("#d").select2();

html

HTML

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

14 个解决方案

#1

I'd try something like this:

我会尝试这样的事情：

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});

#2

You can also reset select2 value using

您还可以使用重置select2值

$(function() {
  $('#d').select2('data', null)
})

alternately you can pass 'allowClear': true when calling select2 and it will have an X button to reset its value.

或者，您可以传递'allowClear'：true，当调用select2时，它将有一个X按钮来重置其值。

#3

According to the latest version (select2 3.4.5) documented here, it would be as simple as:

根据此处记录的最新版本（select2 3.4.5），它将如下所示：

 $("#my_select").select2("val", "");

#4

version 4.0

$('#d').val('').trigger('change');

This is the correct solution from now on according to deprecated message thrown in debug mode: "The select2("val") method has been deprecated and will be removed in later Select2 versions. Use $element.val() instead"

根据调试模式中抛出的弃用消息，这是从现在开始的正确解决方案：“select2（”val“）方法已被弃用，将在以后的Select2版本中删除。使用$ element.val（）代替”

#5

you can used:

你可以用：

$("#d").val(null).trigger("change"); 

It's very simple and work right! If use with reset button:

这很简单，工作正常！如果使用重置按钮：

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change"); 
});

#6

The best way of doing it is:

最好的方法是：

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear

#7

I see three issues:

我看到三个问题：

1. The display of the Select2 control is not refreshed when its value is changed due to a form reset.
2. 当由于表单重置而更改其值时，不会刷新Select2控件的显示。
3. The "All" option does not have a value attribute.
4. “全部”选项没有值属性。
5. The "All" option is disabled.
6. “全部”选项已禁用。

First, I recommend that you use the setTimeout function to ensure that code is executed after the form reset is complete.

首先，我建议您使用setTimeout函数来确保在表单重置完成后执行代码。

You could execute code when the button is clicked:

单击按钮时可以执行代码：

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Or when the form is reset:

或者重置表单时：

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

As for what code to use:

至于使用什么代码：

Since the "All" option is disabled, the form reset does not make it the selected value. Therefore, you must explicitly set it to be the selected value. The way to do that is with the Select2 "val" function. And since the "All" option does not have a value attribute, its value is the same as its text, which is "All". Therefore, you should use the code given by thtsigma in the selected answer:

由于禁用“全部”选项，表单重置不会使其成为选定值。因此，您必须将其明确设置为选定值。这样做的方法是使用Select2“val”函数。由于“全部”选项没有值属性，因此其值与其文本相同，即“全部”。因此，您应该在所选答案中使用thtsigma给出的代码：

$("#d").select2('val', 'All');

If the attribute value="" were to be added to the "All" option, then you could use the code given by Daniel Dener:

如果要将属性值=“”添加到“全部”选项，那么您可以使用Daniel Dener给出的代码：

$("#d").select2('val', '');

If the "All" option was not disabled, then you would just have to force the Select2 to refresh, in which case you could use:

如果未禁用“全部”选项，则只需强制Select2刷新，在这种情况下您可以使用：

$('#d').change();

Note: The following code by Lenart is a way to clear the selection, but it does not cause the "All" option to be selected:

注意：Lenart的以下代码是清除选择的一种方法，但它不会导致选择“全部”选项：

$('#d').select2('data', null)

#8

If you have a populated select widget, for example:

如果您有一个填充的选择小部件，例如：

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

you will want to convince select2 to restore the originally selected value on reset, similar to how a native form works. To achieve this, first reset the native form and then update select2:

你会想要说服select2在重置时恢复最初选择的值，类似于本机表单的工作方式。要实现此目的，首先重置本机表单，然后更新select2：

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}

#9

What I found works well is as follows:

我发现的效果很好如下：

if you have a placeholder option like 'All' or '-Select-' and its the first option and that's that you want to set the value to when you 'reset' you can use

如果您有一个占位符选项，如'全部'或' - 选择 - '并且它是第一个选项，那就是您要将值设置为“重置”时可以使用

$('#id').select2('val',0);

0 is essentially the option that you want to set it to on reset. If you want to set it to the last option then get the length of options and set it that length - 1. Basically use the index of whatever option you want to set the select2 value to on reset.

0基本上是您要在重置时将其设置为的选项。如果要将其设置为最后一个选项，则获取选项的长度并将其设置为该长度 - 1.基本上使用您想要将select2值设置为重置的任何选项的索引。

If you don't have a placeholder and just want no text to appear in the field use:

如果您没有占位符，并且只想在该字段中不显示任何文本，请使用：

$('#id').select2('val','');

#10

To achieve a generic solution, why not do this:

要实现通用解决方案，为什么不这样做：

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

This way: You'll not have to make a new logic for each select2 on your application.

这样：您不必为应用程序上的每个select2创建新逻辑。

And, you don't have to know the default value (which, by the way, does not have to be "" or even the first option)

并且，您不必知道默认值（顺便说一句，它不必是“”，甚至不是第一个选项）

Finally, setting the value to :selected would not always achieve a true reset, since the current selected might well have been set programmatically on the client, whereas the default action of the form select is to return input element values to the server-sent ones.

最后，将值设置为：selected并不总是实现真正的重置，因为所选的当前可能已经在客户端上以编程方式设置，而表单select的默认操作是将输入元素值返回给服务器发送的。

EDIT: Alternatively, considering the deprecated status of live, we could replace the first line with this:

编辑：或者，考虑到现场的弃用状态，我们可以用这个替换第一行：

$('form:has(:reset)').on('click', ':reset', function(){

or better still:

或者更好的是：

$('form:has(:reset)').on('reset', function(){

PS: I personally feel that resetting on reset, as well as triggering blur and focus events attached to the original select, are some of the most conspicuous "missing" features in select2!

PS：我个人觉得重置时重置，以及触发原始选择附带的模糊和焦点事件，是select2中最显眼的“缺失”功能！

#11

Select2 uses a specific CSS class, so an easy way to reset it is:

Select2使用特定的CSS类，因此重置它的简单方法是：

$('.select2-container').select2('val', '');

And you have the advantage of if you have multiple Select2 at the same form, all them will be reseted with this single command.

如果您在同一个表单中有多个Select2，那么您将拥有这一优势，所有这些都将使用此单个命令重置。

#12

Sometimes I want to reset Select2 but I can't without change() method. So my solution is :

有时我想重置Select2，但我不能没有change（）方法。所以我的解决方案是：

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

Using :

使用：

resetSelect2Wrapper("#mySelectId", "myValue");

#13

For me it works only with any of these solutions

对我来说，它只适用于任何这些解决方案

$(this).select2('val', null);

or

要么

$(this).select2('val', '');

#14

    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });