jquery-select2：使用按钮一次选择多个选项

Question

我有一个可以选择的用户列表（可以多选）。当然所有用户都可以手动选择，非常棒。

进一步说我有用户组。大多数时候，只需要选择组中的那些用户。因此，我希望有一种添加所有用户的快捷方式，只需单击组名即可。

我是 select2 的忠实粉丝，但我无法让它发挥作用。

我发现可以通过 .val() 函数选择元素。但是这些元素只有在选择另一个元素时才会显示。

所以我需要一种更新功能。我该怎么做？

我曾尝试触发事件（如更改）但没有成功。

你能帮帮我吗？

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.full.js"></script>

<script type="text/javascript">
$("#id_invited_user").select2({
 "placeholder": "Select user",
});

$("#testbuttonclick").on('click',function (clickEvent){
            clickEvent.preventDefault();
             $("#id_invited_user").val([1,2]);
          });
</script>

<select multiple="multiple" class="selectmultiple form-control" 
id="id_invited_user" name="invited_user">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
<option value="5">Option5</option>
</select>

<a href="" id="testbuttonclick" >select predefined options</a>

Answer 1

您拥有所有正确的代码，只是缺少一个重要细节。

无论何时更改 Select2（或任何其他 JavaScript 组件）的值，都应始终触发 change 事件。此事件在值更改时由浏览器原生触发，但在以编程方式更改值时必须手动触发。

$("#id_invited_user").trigger("change");

这应该始终放在您致电.val(xyz) 之后。