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

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

Всем, кто использует 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);
});

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

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

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

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

Дополнительные обратные вызовы см. в документах.

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

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

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

В моем случае приведенные выше ответы не сработали, но я нашел простое решение.

$("select").on('change', function() {
  var val = $(this).find(".item").attr('data-value');
  alert(val);
});

Я работал с кнопкой ввода-группы, например:

HTML

<div class="input-group">
    <div class="input-group-button">
        <button type="button" class="button clear hide clear-selectize" value="clear">
            <span>X</span>
        </button>
    </div>
    <select name="name" id="id" class="selectize">
        <option value="">Choose an option</option>
        <option value="value1">value1</option>
        <option value="value2">value2</option>
        <option value="Value3">Value3</option>
    </select>
</div>

JQuery

var $selectize = jQuery('.selectize').selectize({
    persist: false,
    create: true,
    sortField: 'text',
    onChange: function (value) {
        checkSelectizeValue(value);
    }
});

function checkSelectizeValue(value) {
    if ($('.selectize').val() !== '') {
        $('.clear-selectize').removeClass('hide');
    } else {
        $('.clear-selectize').addClass('hide');
    }
}

jQuery(document).on("click", ".clear-selectize", function (e) {
    var selectize = $selectize[0].selectize;
    selectize.clear();
});