版本4.0

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>

Answer 1

我会尝试这样的事情：

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

Answer 2

您还可以使用

重置select2值

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

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

Answer 3

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

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

Answer 4

版本4.0

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

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

Answer 5

你可以使用：

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

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

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

Answer 6

最好的方法是：

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

Answer 7

我看到三个问题：

当由于表单重置而更改其值时，不会刷新Select2控件的显示。
＆＃34; All＆＃34;选项没有value属性。
＆＃34; All＆＃34;选项已禁用。

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

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

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

或重置表单时：

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

至于使用什么代码：

自＆＃34; All＆＃34;选项被禁用，表单重置不会使其成为选定的值。因此，您必须将其明确设置为选定值。这样做的方法是使用Select2＆＃34; val＆＃34;功能。而且自从＆＃34; All＆＃34; option没有value属性，其值与其文本相同，即＆＃34; All＆＃34;。因此，您应该在所选答案中使用thtsigma给出的代码：

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

如果要将属性value=""添加到＆＃34;全部＆＃34;选项，然后你可以使用Daniel Dener给出的代码：

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

如果＆＃34;全部＆＃34;选项未被禁用，那么你只需要强制Select2刷新，在这种情况下你可以使用：

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

注意：Lenart的以下代码是一种清除选择的方法，但它不会导致＆＃34; All＆＃34;要选择的选项：

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

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

Answer 9

我发现的效果如下：

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

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

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

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

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

Answer 10

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

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

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

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

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

修改或者，考虑到form select已弃用的状态，我们可以将第一行替换为：

live

或更好：

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

PS：我个人觉得重置时重置，以及触发附加到原始选择的$('form:has(:reset)').on('reset', function(){和blur事件，这些都是最引人注目的＆＃ 34;缺失＆＃34; select2中的功能！

Answer 11

仅此而已：）

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

Answer 12

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

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

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

Answer 13

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

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

使用：

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

Answer 14

对我而言，它仅适用于任何这些解决方案

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

或

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

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

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

Answer 17

删除所有选项值

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

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

17 个答案:

版本4.0