如何获取当前选中的Selectize.js输入项的值

Question

我想知道，如何在 Selectize.js 输入中获取当前选定项目的值？我检查了文档并搜索了与 Stackoverflow 相关的所有 selectize.js，但没有发现任何我可以使用的示例。有任何想法吗？这是我根据文档认为可行的方法，但给了我Undefined is not a function 错误。

请注意代码的最底部，我使用select.on('change';这（除了其他 API 方法）是我尝试过的。 on 更改效果很好，但不幸的是没有其他功能。

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

Answer 1

找到问题了！

对于使用 selectize.js 并遇到 API 问题的任何人，试试这个！

如果您查看我初始化 selectize.js 下拉列表的代码部分，我会将实例存储在我的“选择”变量中，仅此而已。但是，这不是做事的正确方法（至少从我所见）。您需要执行以下操作，而不仅仅是将实例存储在变量中。

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

为什么有必要这样做我不太确定。也许有人可以启发我和任何未来的观众，为什么这种方式有效而我以前的方法无效。

我希望这对将来的其他人有所帮助。随意编辑和进行任何更改。

Answer 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 了解更多回调。

Answer 3

在我的测试中，selectize 立即更新了 <select> 它“替换”的值（实际上它只使用 display: none 隐藏了 <select>）。

因此，如果您既不想使用回调也不想使用全局变量，那么简单如下：

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

Answer 4

在我的情况下，上述答案没有奏效，但我想出了一个简单的解决方案。

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

Answer 5

我使用过输入组按钮，如下所示：

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