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

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

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

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());
});

31
javascript jquery jquery-plugins selectize.js

3 ответов

нашел проблему!

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

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

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

var selectizeControl = $select[0].selectize

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

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

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

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

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

31

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

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 дополнительные вызовы.

28

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

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

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

4