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下拉列表的代码部分，我会将实例存储在我的“选择”中。变量和那个。然而，这不是正确的做事方式（至少从我看到过）。您需要执行以下操作，而不是仅仅将实例存储在变量中。

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

var selectizeControl = $select[0].selectize

执行此操作后，您可以正确使用API。如果不这样做，我会收到Undefined is not a function错误。

最后，为了回答我自己的问题，我能够通过使用以下代码（.on（＆＃39;更改＆＃39;）来检索选择性输入的当前值，并且显然不需要警报）：

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

在我的测试中，选择性地更新<select>'替换'的值（实际上它只使用<select>隐藏display: none）。

因此，如果您不想将回调用作全局变量，那么就像：

一样简单

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

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

5 个答案: