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

Resetting Select2 value in dropdown with reset button

提问by J2B

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

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

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>

回答by thtsigma

I'd try something like this:

我会尝试这样的事情：

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

回答by Lenart

You can also reset select2 value using

您还可以使用重置 select2 值

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

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

或者，您可以'allowClear': true在调用 select2 时通过，它将有一个 X 按钮来重置其值。

回答by Ondrej Henek

version 4.0

版本 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()改用”

回答by Daniel Dener

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", "");

回答by Hoàng V? Tgtt

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"); 
});

回答by anonymous anonymous

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

回答by John S

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. The "All" option does not have a valueattribute.
3. The "All" option is disabled.

1. 当 Select2 控件的值由于表单重置而更改时，不会刷新其显示。
2. “全部”选项没有value属性。
3. “全部”选项被禁用。

First, I recommend that you use the setTimeoutfunction 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 valueattribute, 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" 函数。并且由于“All”选项没有value属性，它的值与其文本相同，即“All”。因此，您应该在所选答案中使用 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:

如果要将该属性value=""添加到“全部”选项，则可以使用 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)

回答by nurikabe

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());
}

回答by Guito339

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 值设置为 on reset 的任何选项的索引。

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

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

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

回答by Ifedi Okonkwo

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 :selectedwould not always achieve a true reset, since the current selectedmight well have been set programmatically on the client, whereas the default action of the form selectis to return input element values to the server-sent ones.

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

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

编辑：或者，考虑到已弃用的状态live，我们可以将第一行替换为：

$('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 blurand focusevents attached to the original select, are some of the most conspicuous "missing" features in select2!

PS：我个人觉得reset on reset，以及原始select的触发blur和focus事件，是select2中最显眼的一些“缺失”的功能！