jquery-select2 2:使用一个按钮同时选择多个选项

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)之后。