使用重置按钮重置下拉列表中的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>

Answer 1

我会尝试这样的事情:

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

Answer 2

您还可以使用重置select2值

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

或者你可以'allowClear': true在调用select2时传递它,它将有一个X按钮来重置它的值.

Answer 3

版本4.0

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

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

Answer 4

根据此处记录的最新版本(select2 3.4.5),它将如下所示:

 $("#my_select").select2("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

我看到三个问题:

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

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

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

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

或者重置表单时:

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

至于使用什么代码:

由于禁用"全部"选项,表单重置不会使其成为选定值.因此,您必须将其明确设置为选定值.这样做的方法是使用Select2"val"函数.由于"全部"选项没有value属性,因此其值与其文本相同,即"全部".因此,您应该在所选答案中使用thtsigma给出的代码:

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

如果要将属性value=""添加到"全部"选项,则可以使用Daniel Dener给出的代码:

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

如果未禁用"全部"选项,则只需强制Select2刷新,在这种情况下,您可以使用:

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

注意:Lenart的以下代码是清除选择的一种方法,但它不会导致选择"全部"选项:

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