6

我有一个带有多选字段的表单,使用 Formtastic 和 Chosen 创建。

这个表单有一个多选字段,这里是它的 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

我想使用jQuery重置输入字段(表单提交并远程重置),我似乎无法弄清楚如何删除选定的元素//清除输入字段。问题是 selected 更改了输入字段,因此它不是一个简单的文本区域。

谁能指出我正确的方向?

4

11 回答 11

14

似乎这两个答案的组合对我有用:

$('.chosen-select option').prop('selected', false).trigger('chosen:updated');

这将取消选择所有选项并重置所选下拉菜单。

http://jsfiddle.net/donkeysauras/j9yuL/ <-- 工作示例

于 2013-11-20T00:58:01.437 回答
13

试试这个

$('.chzn-select').val('').trigger('liszt:updated');
于 2012-09-22T13:02:47.493 回答
3

这对我有用:

$('form#form_id').find('select').each(function(i, element) {
    $(element).chosen('destroy');
    $(element).prop("selectedIndex", -1);
    $(element).chosen();
});
于 2016-01-29T15:17:45.660 回答
1

您可以按如下方式重置multiple select使用jQuery

$('.chzn-select option').prop('selected', false);

class name选择的 是chzn-select

这里是一个工作示例

于 2012-09-22T13:02:03.400 回答
1

文档

动态更新选择

如果您需要更新您的选择字段中的选项并希望 Chosen 获取更改,您需要在该字段上触发“chosen:updated”事件。选择将根据更新的内容重新构建自己。

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

就我而言,它是

jQuery("#my-select-box").trigger("chosen:updated");

my-select-box是选择框的 id。

于 2016-06-01T06:37:23.130 回答
0

对于可能最终解决了这个问题的人(有多个并且需要组合),Chosen 已经更新了他们的语法——改用这个:

$('.chzn-select').val('').trigger('chosen');

在哪里'.chzn-select'可以切换为'select''#yourSelect'或您希望使用的任何其他选择方法。

查看:

于 2013-09-06T00:08:23.787 回答
0

这对我来说很好

$('.reset-btn').click(function(){
    var form = $(this).closest('form').get(0);
    form.reset();
    $('.chosen-select').trigger('chosen:updated');
});

基本上我强制重置后选择的表单重置和更新。:D

于 2014-09-15T17:55:57.013 回答
0

这完全取决于您选择的设置。它对我有用:

$('.chzn-select-no-search').val('').trigger('liszt:updated');
于 2018-03-08T08:52:56.617 回答
0

这个解决方案对我有用

$('#.chosen-select').val('').prop('selected', false).trigger('chosen:updated')
于 2019-03-20T12:44:50.033 回答
0

只有这样才能工作:

$('#client_filter').html(' '); //this worked

不工作:

$('#client_filter').val('').trigger('change') ; //not working
$('#client_filter').val('').trigger('chosen:updated') ; //not working
$('#client_filter').val('').trigger('liszt:updated') ; //not working
于 2019-07-03T12:06:51.910 回答
0

这是唯一对我有用的东西。多选值是一个数组,所以你应该这样做:

$('#elementID').val([]).trigger('chosen:updated');

于 2020-02-11T20:22:01.430 回答