如何使用jQuery选择的插件重置表单?


80

使用Jquery Chosen插件select的形式有很多元素。如何重置表格?以下内容不起作用:

<input type="reset" />

2
您应该将接受的答案更改为杰克·奥尼尔的答案。其他解决方案不再起作用。
詹姆斯

1
请将您接受的答案更改为杰克·奥尼尔回答。因为最新版本的触发器现在称为:updated
Wisher,2013年

1
@Jame&Well wisher:并不是每当插件更新时,我们都会更改此站点上所有已回答的问题。当时的解决方案是正确的。罗伯特·沃德尔(RobertWaddell)对答案发表了评论,我相信这是要走的路。
2014年

Answers:


188

您需要重置该字段的值,然后liszt:updated在输入上触发事件以使其更新,我在这里用了一个有效的例子来摆弄。

http://jsfiddle.net/VSpa3/3/

$(".chzn-select").chosen();
$('a').click(function(){
    $(".chzn-select").val('').trigger("liszt:updated");
});​

自从选定的v1.0发布以来,触发器现在称为“ chosen:updated”。使用此新版本的任何人都需要使用触发更新

$(".chosen-select").val('').trigger("chosen:updated");

15
好答案!在最新版本的选择中,该名称应为“((“ chosen:updated”))”
Robert Waddell 2013年

2
好答案!但是是否可以重置并再次显示原始占位符?
NielsSønderbæk2014年

1
还是行不通。我正在通过Ajax调用(jQuery load()方法)动态替换我的选择。然后发出一个新的selected()。trigger(“ chosen:updated”); 并且不起作用。所选搜索仍然不适用于新选择。
Marco Marsala 2014年

将其用于“ multiple:true”选择字段时,似乎也删除了占位符。您知道清除后保留占位符的方法吗?
David Basalla '17

1
啊,我想我找到了……$selectField.val([]).trigger('chosen:updated')似乎可以解决问题
David Basalla

52

自从选定的v1.0发布以来,触发器现在称为“ chosen:updated”。使用此新版本的任何人都需要使用触发更新

$(".chosen-select").val('').trigger("chosen:updated");

1
由于更改,这应该是正确的答案。我发现其他解决方案均无法正常工作。谢谢!
詹姆斯,

1
但是不行!如果选择被另一个具有相同ID /名称的选择(jQuery load()方法)命名为替换,则搜索将停止在新选择上进行。尝试在新的选择上调用.chosen(),调用.chosen('destroy'),调用.trigger(“ chosen:updated”)以及它们的组合。
Marco Marsala 2014年

14

您可以尝试以下方法:

$('select').chosen('destroy');  

$('select').prop("selectedIndex", -1);   
$('select').chosen();

11

为了使重置自然工作,请使用以下命令:

$("input[type='reset'], button[type='reset']").click(function(e){
    e.preventDefault();

    var form = $(this).closest('form').get(0);
    form.reset();

    $(form).find('select').each(function(i, v) {
        $(v).trigger('chosen:updated');
    });
}

1
使用form.reset()然后触发selected:update是最好的解决方案,尤其是如果您想显示最初显示的表单时。设置.val('')不会使表格返回默认值。
只是普通高

可以了 记住要手动重置已添加到DOM的组合框(选择)。
Marco Marsala 2014年


0

对于一个更轻松的方法...假设您的输入是在<form>标签内:

<form>
    <!-- your selects go here and any other input fields -->
    <input type="reset" value="Reset"> 
</form>

这就是我要做的:

$("input[type='reset'], button[type='reset']").click(function(e){
      setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});

在这里小提琴


@MarcoMarsala如果您看小提琴,它确实起作用。您的代码与小提琴有何不同?
prograhammer 2014年

1
我更新到1.2.0,所有工作都没有麻烦。我什至不需要setTimeout。也许是一个错误在1.12
马可马沙拉

0

前面的选项对我都不起作用。我不得不像老派一样去做,即使使用一些本地javascript,这也是代码:

$('#dllSample option').each(function(){
     $(this)[0].selected = false;   
});
$("#dllSample").trigger("chosen:updated");

0

这里没有答案对我有用。我使用带有multiple属性的selected选择。正常的提交表单按钮也不能解决问题。所以我只是有一个功能,单击即可执行此操作。

//Gets the selected values
var selected = [];
    for (var option of document.getElementById('mySelect').options) {
        if (option.selected) {
            selected.push(option.value);
        }

    }

//Resets the form
document.getElementById('form1').reset();

//Chosen values doesnt get reset, so we do this manually
//Removes the values selected by clicking on the x icon
$link = $('a.search-choice-close');
            var i;
            for (i = 0; i < selected.length; i++) {
                $link[i].click();
            }

-1

有时,您必须重置选中的选择。

我做这个

jQuery.fn.chosen_reset = function(n){
  $(this).chosen('destroy');
  $(this).prop('selectedIndex', 0);
  $(this).chosen(n)
}

然后像这样调用此函数,并以选项作为参数

$('select').chosen_reset({width:'369px'});

-2

在jQuery这样的东西应该工作

<input name="Text1" id="something" type="text">

<input type="reset" id="reset_me"/>


$("#reset_me").click(function() { 
$("#something").val("");
});

$ j('。chzn-select')。each(function(){$ j(this).val(“”)}); 不会清除所选标签中的标签
PH的

@PH,如果您可以提供代码示例以帮助我们
MHowey 2011年

sottenad刚刚回答了这个问题,请参考上面的jsfiddle链接。现在我的代码看起来像$ j('。chzn-select')。each(function(){$ j(this).val(“”)。trigger(“ liszt:updated”);});
PH
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.