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

Posted 2023-02-22

【中文标题】如何使用 jQuery 选择的插件重置表单？

【英文标题】：How can I reset a form with jQuery chosen plugin?

【发布时间】：2011-12-15 09:56:24

【问题描述】：

我有一堆select 元素的形式与I am using the Jquery Chosen plugin.如何重置表格？以下方法不起作用：

<input type="reset" />

【问题讨论】：

您应该将接受的答案更改为 Jack O'Neill 的答案。其他解决方案不再起作用。

请将您接受的答案更改为 Jack O'Neill answere。因为最新版本的触发器现在称为 :updated

@Jame & Well wisher：我们不会在插件更新时更改此站点上所有已回答的问题。当时的解决方案是正确的。 RobertWaddell 对答案发表了评论，我相信这是要走的路。

【参考方案1】：

在 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 如果你能提供你的代码示例供我们帮助

sottenad 刚刚回答了这个问题，请参考他上面的 jsfiddle 链接。现在我的代码看起来像 $j('.chzn-select').each(function () $j(this).val("").trigger("liszt:updated"); );

【参考方案2】：

您需要重置字段的值，然后触发输入上的liszt:updated 事件以使其更新，我在这里做了一个工作示例。

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

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

自选择的 v1.0 发布以来，触发器现在称为“选择：更新”。使用此新版本的任何人都需要使用触发更新

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

【讨论】：

好答案！对于最新版本的 Chosen，这应该是 "("chosen:updated")"

很好的答案！但是是否可以重新设置并再次显示原始占位符？

还是不行。我正在通过 Ajax 调用（jQuery load() 方法）动态替换我的选择。然后发出一个新的 selected().trigger("chosen:updated");并且不起作用。选择的搜索仍然无法在新的选择上工作。

当将它用于“multiple:true”选择字段时，它似乎也删除了占位符。你知道清除后保留占位符的方法吗？

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

【参考方案3】：

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

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

【讨论】：

由于更改，这应该是正确的答案。我发现的其他解决方案都不能正常工作。谢谢！

但是不行！如果选择被另一个具有相同 id/name 的选择（jQuery load() 方法）动态替换，则搜索停止在新选择上工作。尝试在新选择上调用 .chosen()、调用 .chosen('destroy')、调用 .trigger("chosen:updated") 以及这些的组合。

【参考方案4】：

你可以试试这个：

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

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

【参考方案5】：

有时您必须重置调用选择的选择。

我这样做

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

然后像这样调用这个函数，将选项作为参数

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

【参考方案6】：

为了自然地重置工作，请使用：

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

【讨论】：

使用 form.reset() 然后触发 selected:update 是最好的解决方案，特别是如果您想呈现最初显示的表单。设置 .val('') 不会将表单返回到默认值。

这是有效的。请记住手动重置以动态方式添加到 DOM 的组合框（选择）。

【参考方案7】：

对于更轻松的方法...假设您的输入在 <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);
);

见fiddle here。

【讨论】：

@MarcoMarsala 如果你看看小提琴，它确实有效。您的代码与小提琴有何不同？

我更新到 1.2.0 并且一切都开始工作没有麻烦。我什至不需要 setTimeout。可能是 1.12 中的一个错误

【参考方案8】：

以前的选项都不适合我。我不得不像老派一样做，即使使用一些原生 javascript，这里是代码：

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

【参考方案9】：

$("#Your_id").trigger("chosen:updated");

这对我有用

【参考方案10】：

这里没有一个答案对我有用。 我将选择的选择与多个属性一起使用。 正常的提交表单按钮也没有起到作用。 所以我只是有一个功能在点击时执行此操作。

//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();