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

Question

将所选项目重置为默认值的最佳方法是什么？我正在使用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>

score 66 · Accepted Answer

我会尝试这样的事情：

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

score 62 · Accepted Answer

您还可以使用重置 select2 值

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

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

score 49 · Accepted Answer

4.0版

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

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

score 32 · Accepted Answer

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

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

score 20 · Accepted Answer

你可以使用：

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

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

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

score 7 · Accepted Answer

最好的方法是：

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

score 6 · Accepted Answer

我看到三个问题：

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)

score 5 · Accepted Answer

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

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

score 2 · Accepted Answer

就这样:)

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

score 2 · Accepted Answer

我发现效果很好的如下：

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

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

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

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

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

score 1 · Accepted Answer

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

$(':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：我个人觉得resetting on reset，以及原select附带的触发blur和focus事件，是select2中最显眼的一些“缺失”功能！

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

使用：

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

score 0 · Accepted Answer

如果要在编辑页面中重置表单，可以将此按钮添加到表单

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

score 0 · Accepted Answer

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

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

或者

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

很多很好的答案，但最新版本对我没有用。如果您想要一个适用于所有 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);
    });
});

score -1 · Accepted Answer

-1

删除所有选项值

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

于 2020-11-19T13:08:32.450 回答

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

18 回答 18

4.0版

Related

Reference