Как получить значение текущего выбранного элемента Selectize.js

Мне было интересно, как я могу получить значение текущего выбранного элемента в моем элементе Selectize.js? Я проверил документацию и просмотрел все selectize.js, связанные с Stackoverflow, но ничего не нашел в примере, на котором я мог бы уйти. Есть идеи? Вот что я понял, будет работать на основе документации, но вместо этого дал мне ошибку Undefined is not a function.

Обратите внимание на самую нижнюю часть кода, где я использую select.on('change'; это (в дополнение к другим методам API) - это то, что я пробовал. На смене отлично работает, но, к сожалению, ничего больше.

var select = $('#searchTextbox').selectize({
          maxItems: 1, //Max items selectable in the textbox
          maxOptions: 30, //Max options to render at once in the dropdown
          searchField: ['text'], //Fields the autocomplete can search through.  Example of another searchable field could be 'value'
          openOnFocus: true,
          highlight: true,
          scrollDuration: 60, //currently does nothing; should say how many MS the dropdown and drop up animations take
          create: false, //Whether or not the user is allowed to create fields
          selectOnTab: true,
          render: {
              option: function(data, escape) {
                  var valueArray = [];         
                  valueArray[0] = data.value.split(",");
                  var color = valueArray[0][0] == "1" ? "green" : "red";

                  return '<div class="option" style="color: ' 
                      + color 
                      + ';">' 
                      + escape(data.text) 
                      + '</div>';
              },
              item: function(data, escape) {
                  var valueArray = [];         
                  valueArray[0] = data.value.split(",");
                  var color = valueArray[0][0] == "1" ? "green" : "red";

                  return '<div class="option" style="color: ' 
                      + color 
                      + ';">' 
                      + escape(data.text) 
                      + '</div>';
              }      
          }
      });

select.on('change', function() {
      var test = select.getItem(0);
      alert(test.val());
});

Ответ 1

Обнаружена проблема!

Для тех, кто использует selectize.js и имеет проблемы с API, попробуйте это!

Если вы посмотрите на часть кода, где я инициализировал выпадающее меню selectize.js, я сохраняю экземпляр в своей переменной "select" и что он. Однако это не правильный способ делать что-то (из того, что я видел, по крайней мере). Вам нужно сделать следующее, а не просто просто хранить экземпляр в переменной.

var $select = $("#yourSelector").selectize({
    //options here
});

var selectizeControl = $select[0].selectize

После этого вы можете правильно использовать API. Не делая этого таким образом, я получал ошибку Undefined is not a function.

Наконец, чтобы ответить на мой собственный вопрос, мне удалось получить текущее значение входа selectize, используя следующий код (.on('change') и alert, очевидно, не нужны):

selectizeControl.on('change', function() {
      var test = selectize.getValue();
      alert(test);
});

Почему это нужно делать так, я не совсем уверен. Возможно, кто-то может просветить меня и любых будущих зрителей о том, почему этот способ работает, а мой предыдущий метод не сделал.

Я надеюсь, что это поможет кому-то еще в будущем. Не стесняйтесь редактировать и вносить изменения.

Ответ 2

Вместо добавления события позже вы можете сделать это при инициализации:

var select = $('#searchTextbox').selectize({
          maxItems: 1, //Max items selectable in the textbox
          maxOptions: 30, //Max options to render at once in the dropdown
          ...
          onChange: function(value) {
               alert(value);
          }
      });

Просмотрите docs для получения дополнительных обратных вызовов.

Ответ 3

В моих тестах selectize imediatelly обновляет значение <select> его 'заменяет' (на самом деле он скрывает только <select> с помощью display: none).

Итак, если вы не хотите использовать обратные вызовы не глобальные переменные, это просто:

$('#id_of_the_select_element_you_called_selectize_on').val().