如何使用Chosen.JS多选以编程方式选择多个选项

How to programmatically select multiple options with Chosen.JS multiple select

本文关键字：方式 选择 选项 编程 何使用 Chosen JS      更新时间：2023-09-26

我很难弄清楚如何用chosenJS/chosen.js以编程方式在多选中选择多个值，并且仍然将这些值绑定到我的ng模型（angularJS）。

案例：我有一个用户列表，其中一些用户已经保存在当前项目中。我想把这些用户显示为选中的（但我不知道怎么做）。

我试着找到我想要预先选择的用户的索引，并让他们像这样"选择"：

$('.chzn-container-multi').val(0).trigger('liszt:updated');
$('.chzn-container-multi').val(1).trigger('liszt:updated');
$('.chzn-container-multi').val(2).trigger('liszt:updated');

但这只选择最后一个。

任何帮助都将不胜感激！

编辑

在#Marek Kowalski的帮助下，我可以在列表中选择值，但它没有应用于与我的下拉列表相关的ng模型，有人能解决这个问题吗？

选择多个值并更新所选值可以通过这个一行完成

对于<1.0

$('.chzn-container-multi').val([0,1,2]).trigger('liszt:updated');

OR适用于版本>1.0

$('.chzn-container-multi').val([0,1,2]).trigger('chosen:updated');

我不确定这是推荐的方法，但对我有效的解决方案是手动更改选项上的selected="selected"属性，然后触发"liszt:updated"事件。要选择前3个选项，请使用以下代码：

$('select option:nth-child(1)').attr('selected', 'selected');
$('select option:nth-child(2)').attr('selected', 'selected');
$('select option:nth-child(3)').attr('selected', 'selected');
$('select').trigger('liszt:updated');
// since version 1.0 the event name is changed to
$('select').trigger('chosen:updated');
相关文章：