使用重置button重置下拉菜单中的select2值

将选定项目重置为默认值的最佳方法是什么? 我正在使用Select2库,当使用正常buttontype="reset" ,下拉列表中的值不会被重置。

所以当我按下我的button,我想再次显示“全部”。

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

或者你可以传递'allowClear': true当调用select2时为'allowClear': true ,它将有一个Xbutton来重置它的值。

根据这里logging的最新版本(select2 3.4.5),它将如下简单:

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

版本4.0

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

从现在开始,根据在debugging模式下抛弃的消息,这是正确的解决scheme:“ select2("val")方法已被弃用,将在以后的Select2版本中被删除,使用$element.val()

你可以使用:

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

这很简单,工作正确! 如果使用复位button:

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

最好的方法是:

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

我看到三个问题:

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

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

当button被点击时,你可以执行代码:

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

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

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

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

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

如果您有一个填充select小部件,例如:

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

你会希望说服select2恢复最初select的值在复位,类似于本地的forms工作。 要实现这一点,首先重置本机窗体,然后更新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()); } 

我发现的作品很好,如下所示:

如果您有一个占位符选项,如“全部”或“select”,并且它是第一个选项,那就是您希望在“重置”时设置值,您可以使用

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

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

如果您没有占位符,并且只希望在该字段中不显示任何文本,请使用:

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

为了实现一个通用的解决scheme,为什么不这样做:

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

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

而且,您不必知道默认值(顺便说一句,不必是""甚至是第一个选项)

最后,将值设置为:selected将不会总是实现真正的重置,因为当前select的可能已经在客户端上以编程方式设置,而form select的默认操作是将input元素值返回到服务器发送的值。

编辑:另外,考虑到不赞成使用的状态,我们可以用这个replace第一行:

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

或更好:

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

PS:我个人觉得复位重置,以及触发blurfocus事件附加到原来的select,是一些最显眼的“缺失”的function在select2!

Select2使用一个特定的CSS类,所以一个简单的方法来重置它:

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

而且,如果你有多个Select2的forms相同的话,你就可以用这个命令重新设置它们。

有时我想重置Select2,但是我不能没有更改()方法。 所以我的解决scheme是:

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

使用:

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

对我来说,它只适用于任何这些解决scheme

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

要么

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