使用重置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
我看到三个问题：
- 当由于表单重置而改变其值时，Select2控件的显示不会被刷新。
- “全部”选项没有
value属性。 - “全部”选项被禁用。
首先，我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：我个人觉得复位重置，以及触发blur和focus事件附加到原来的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', '');
