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

Question

我想知道,我如何在Selectize.js输入中获得当前所选项目的值？我已经检查了文档并搜索了与Stackoverflow相关的所有selectize.js,但没有发现任何可能的例子.有任何想法吗？这是我认为基于文档的工作,但反而给了我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());
});

Answer 1

发现问题了!

对于任何使用selectize.js并遇到API问题的人,试试吧!

如果你看一下我初始化selectize.js下拉列表的代码部分,我将实例存储在我的'select'变量中,就是这样.然而,这不是正确的做事方式(至少从我看到过).您需要执行以下操作,而不是仅仅将实例存储在变量中.

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

var selectizeControl = $select[0].selectize

执行此操作后,您可以正确使用API​​.没有这样做,我收到了一个Undefined is not a function错误.

最后,为了回答我自己的问题,我能够通过使用以下代码检索选择输入的当前值(.on('change')并且警报显然不是必需的):

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

查看文档以获取更多回调.

Answer 3

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

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

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