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

Question

我无法弄清楚如何使用 selectedJS/chosen.js 以编程方式在多项选择中选择多个值，并且这些值仍然绑定到我的 ng-model (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-model，有人对此有解决方案吗？

Answer 1

选择多个值并更新选择的值可以通过这个单行来完成

对于版本

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

OR 版本 > 1.0

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

Answer 2

我不确定这是推荐的方法，但对我有用的解决方案是手动更改选项的 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');