Как выбрать все опции с помощью Selectize?

Question

Я создаю форму с помощью jQuery selectize plugin. Теперь я пытаюсь создать метод для выбора всех параметров в selectbox и отображения их как выбранных.

Это код, я использую:

$('#select_all').click(function() { 

      $('#project_user_ids option').prop('selected', true); 

      $('#project_user_ids').selectize(); 

     }); 

Он работает, чтобы выбрать все варианты, но они не показаны в переключателе. Мне нужно «обновить» параметры и показать выбранные параметры в поле.

Как я могу это сделать?

Answer 1

Если вы хотите динамически выбирать все параметры, используя сначала выбрать плагин, вам необходимо инициализировать плагин и получить его экземпляр.

Используя метод setValue(), вы можете изменить значение элемента управления. Например: selectize.setValue(['value1', 'value2']);

Используя setValue(), можно установить все значения с помощью простого метода из подчеркивания или lodash. selectize.setValue(_.keys(selectize.options));

Полный код должен выглядеть следующим образом:

var $projectUserIds = $('#project_user_ids').selectize(); // Selectize plugin initialization 
var selectize = $projectUserIds[0].selectize; // Get selectize instance 

$('#select_all').click(function() { 
    selectize.setValue(_.keys(selectize.options)); // Set all selectize options using setValue() method 
}); 

Answer 2

В качестве временного решения для функциональности "Select All", вы можете использовать функцию JS для ctrl+a.

Я создал эту функцию, которая добавляет все доступные варианты, в массив активных элементов:

$('#my-select').keyup(function(e) { 
    if (e.ctrlKey == true) { 
     if (e.keyCode == 65 || e.keyCode == 97){ 
     var el = el=$('#my-select')[0].selectize; 
     var optKeys = Object.keys(el.options); 
     optKeys.forEach(function (key, index) { 
      el.addItem(key); 
     }); 
     } 
    } 
    });