用复位按钮重置下拉菜单中的 Select2 值

问题描述

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

所以当我按下我的按钮时，我想再次显示”All” 。

jQuery 的

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

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>

最佳解决方案

我会尝试这样的：

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

次佳解决方案

您也可以使用重置 select2 值

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

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

第三种解决方案

根据最新版本 (select2 3.4.5) 记录的 here，它将简单如下：

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

第四种方案

你可以使用：

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

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

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

第五种方案

版本 4.0

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

这是从现在开始的正确的解决方案，根据弃用在调试模式下的消息：「select2("val")方法已被弃用，将在以后的 Select2 版本中删除，使用 $element.val()」

第六种方案

最好的做法是：

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

第七种方案

如果您有一个填充的选择小工具，例如：

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

您将想要说服 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());
}

第八种方案

我看到三个问题：

当它的值由于表单复位而改变时，Select2 控件的显示不会刷新。
“All” 选项没有 value 属性。
“All” 选项被禁用。

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

您可以在点击按钮时执行代码：

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

或者当表单重置时：

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

至于要使用的代码：

由于”All” 选项被禁用，表单重置不会使其成为所选值。因此，您必须显式地将其设置为所选值。这样做的方法是使用 Select2 “val” 功能。而且由于”All” 选项不具有 value 属性，因此其值与其文本相同，即”All” 。因此，您应该在选择的答案中使用由 thtsigma 提供的代码：

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

如果将属性 value=""添加到”All” 选项，那么可以使用 Daniel Dener 给出的代码：

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

如果”All” 选项没有被禁用，那么你只需要强制 Select2 刷新，在这种情况下你可以使用：

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

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

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

参考文献

Resetting Select2 value in dropdown with reset button

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

用复位按钮重置下拉菜单中的 Select2 值