如何使用 jQuery 重置已选择的多选字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12543888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you reset a Chosen multiple select field using jQuery?
提问by jay
I have a form with a multiple select field, created using Formtastic and Chosen.
我有一个带有多个选择字段的表单，使用 Formtastic 和 Chosen 创建。
This form has a multiple select field, here is the rails code for it:
这个表单有一个多选字段，这里是它的 rails 代码：
= semantic_form_for 'post', :url => action_name_post_path(@post), :html => {:method => :put}, :remote => true do |f|
= f.input :blogs, :label => _("Blog"), :as => :select, :multiple => :true, :input_html => {:class => "chzn-select"}, :collection => Blog.all
I would like to reset the input field using jQuery (the form is submitted and reset remotely), and I can't seem to figure out how to remove the selected elements//clear the input field. The issue is that chosen changes the input field so it isn't a simple text area.
我想使用 jQuery 重置输入字段（表单是远程提交和重置的），但我似乎无法弄清楚如何删除所选元素//清除输入字段。问题是 selected 更改了输入字段，因此它不是一个简单的文本区域。
Can anyone point me in the right direction?
任何人都可以指出我正确的方向吗？
回答by DONKEYSAURUS
Seems like combination of the two answers works for me:
似乎两个答案的组合对我有用：
$('.chosen-select option').prop('selected', false).trigger('chosen:updated');
This deselects all options and also resets the chosen drop down.
这将取消选择所有选项并重置所选下拉列表。
http://jsfiddle.net/donkeysauras/j9yuL/<-- working example
回答by Mr. 14
Try this
尝试这个
$('.chzn-select').val('').trigger('liszt:updated');
回答by Hassan Akram
This worked for me:
这对我有用：
$('form#form_id').find('select').each(function(i, element) {
$(element).chosen('destroy');
$(element).prop("selectedIndex", -1);
$(element).chosen();
});
回答by Prafulla Kumar Sahu
from documentation
来自文档
Updating Chosen Dynamically
动态更新选择
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.
如果您需要更新选择字段中的选项并希望选择获取更改，则需要在该字段上触发“选择：更新”事件。Chosen 将根据更新的内容重新构建自己。
$("#form_field").trigger("chosen:updated");
In my case it was
就我而言，它是
jQuery("#my-select-box").trigger("chosen:updated");
my-select-boxis id of selectbox.
my-select-box是选择框的 id。
回答by The Alpha
You can reset the multiple selectusing jQueryas follows
您可以按如下方式重置multiple select使用jQuery
$('.chzn-select option').prop('selected', false);
Where the class nameof your select is chzn-select.
class name您选择的位置在哪里chzn-select。
回答by matthewsheets
For whoever may have ended up on this question (there are multiple and they need to be combined), Chosen has updated their syntax--use this instead:
对于可能最终回答这个问题的人（有多个，需要将它们组合起来），Chosen 更新了他们的语法——改用这个：
$('.chzn-select').val('').trigger('chosen');
where '.chzn-select'can be switched out for 'select', '#yourSelect'or whatever other method of selection you wish to use.
where'.chzn-select'可以切换为'select'，'#yourSelect'或您希望使用的任何其他选择方法。
Check out:
查看：
回答by JarekMaxiM
It all depends on your chosen settings. It worked for me:
这一切都取决于您选择的设置。它对我有用：
$('.chzn-select-no-search').val('').trigger('liszt:updated');
回答by Azam Alvi
This solution worked for me
这个解决方案对我有用
$('#.chosen-select').val('').prop('selected', false).trigger('chosen:updated')
回答by Deepa MG
Only this could work:
只有这样可以工作：
$('#client_filter').html(' '); //this worked
NOT WORKING:
不工作：
$('#client_filter').val('').trigger('change') ; //not working
$('#client_filter').val('').trigger('chosen:updated') ; //not working
$('#client_filter').val('').trigger('liszt:updated') ; //not working
回答by Amir Tofighi
This is the only thing that worked for me. multiselect values are an array so you should do it this way:
这是唯一对我有用的东西。多选值是一个数组，所以你应该这样做：
$('#elementID').val([]).trigger('chosen:updated');
$('#elementID').val([]).trigger('chosen:updated');
