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).