【问题标题】：Resetting Select2 value in dropdown with reset button使用重置按钮重置下拉列表中的 Select2 值
【发布时间】：2013-02-18 18:14:04
【问题描述】：

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

所以当我按下按钮时，我希望再次显示“全部”。

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>

【问题讨论】：

你的按钮代码你也可以吗？
重复帖子stackoverflow.com/questions/13240047/…

标签： javascript html forms jquery-select2

【解决方案1】：

我会尝试这样的：

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

【讨论】：

你也可以这样使用---- $("#d").select2('val', '');它还会将 DD 值设为初始值。

【解决方案2】：

您还可以使用重置 select2 值

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

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

【讨论】：

我试过了......它可以工作，但没有选择任何内容。 OP 希望选择第一个选项，因此 $('#d').select2('data', $('#d').find('option')[0]) 之类的东西会将 select2 值重置为原始 select 元素中的第一个选项。（@Lenart，加上一个更通用的解决方案）
allowClear 需要占位符。如果没有就会出现这个错误 TypeError: this.placeholder is undefined

【解决方案3】：

4.0 版

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

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

【讨论】：

你拯救了我的一天 :)
这需要提高！在 V4 中，其他解决方案都不起作用。
这是我见过的唯一有效的方法，谢谢。
为我工作的版本 4.0.13

【解决方案4】：

根据最新版本（select2 3.4.5）记录的here，它会很简单：

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

【讨论】：

最终，这个解决方案是唯一对我有用的解决方案。我有几个要重置的 select2，但使用一个 css 选择器不起作用。我不得不遍历它们并单独重置它们。

【解决方案5】：

你可以使用：

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

这很简单，而且工作正常！如果与重置按钮一起使用：

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

【讨论】：

也为我工作，没有得到任何其他解决方案！

【解决方案6】：

最好的方法是：

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

【讨论】：

这个效果最好，其他解决方案都没有帮助
你拯救了我的一天 :)

【解决方案7】：

我看到三个问题：

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

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

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

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

或者当表单被重置时：

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

至于用什么代码：

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

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

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

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

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

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

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

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

【讨论】：

$("form").on("reset",... 为我工作，在事件处理程序中我只是调用$(".select2").trigger("change"); 来刷新页面上的所有 select2 对象，因为reset 正确重置了基础选择列表。 setTimeout() 是个不错的技巧！

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

我发现效果很好的如下：

如果您有一个占位符选项，例如“All”或“-Select-”，它是第一个选项，并且您希望在“重置”时将值设置为您可以使用

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

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

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

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

【讨论】：

【解决方案10】：

仅此而已:)

$('#form-edit').trigger("reset");
$('#form-edit').find('select').each(function(){
  $(this).change();
});

【讨论】：

【解决方案11】：

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

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

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

而且，您不必知道默认值（顺便说一下，不必是 "" 甚至是第一个选项）

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

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

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

或者更好：

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

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

【讨论】：

【解决方案12】：

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

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

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

【讨论】：

这个对我有用，因为我试图重新填充下拉列表的值并保留最后选择的选项

【解决方案13】：

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

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

使用：

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

【讨论】：

【解决方案14】：

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

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

或

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

【讨论】：

【解决方案15】：

    // 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');
            });
        });

【讨论】：

【解决方案16】：

如果你想在编辑页面中重置表单，你可以在表单中添加这个按钮

<button type="reset" class="btn btn-default" onclick="resetForm()">Reset</button>

并像这样编写你的 JS 代码：

function resetForm() {
    setTimeout(function() {
        $('.js-select2').each(function () {
            $(this).change();
            /* or use two lines below instead */
            // var oldVal = $(this).val();
            // $(this).select2({'val': oldVal});
        });
    }, 100);
}

【讨论】：

【解决方案17】：

很多很好的答案，但最新版本对我没有用。如果您想要一个适用于所有 select2 的通用解决方案，这是完美的。

版本 4.0.13 测试

$(document).ready(function() {
    $('form').on('reset', function(){
        console.log('triggered reset');
        const $r = $(this);
        setTimeout(function(){
            $r.closest('form').find('.select2-hidden-accessible').trigger('change');
        }, 10);
    });
});

【讨论】：

【解决方案18】：

删除所有选项值

$("#id").empty();

【讨论】：