在非多选框上使用Selectize API

时间:2014-06-20 12:48:51

标签: javascript jquery selectize.js plunker

我有一个简单的Selectize设置,我正在尝试使用它的getOptionaddOption方法。

<select id="select">
  <option value="0">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="2">Arnold Schwarzenegger</option>
</select>
<button id="get-option">Get option</button>
<button id="add-option">Add option</button>

我已经写了一些JS来调用我的选择实例上的方法:

jQuery(function() {
  var selectize = $('#select').selectize()[0].selectize;

  $('#add-option').on('click', function() {
    selectize.addOption({ text: 'Peter Pan' });
  });

  $('#get-option').on('click', function() {
    console.log('Get option:', selectize.getOption(2)[0]);
  });
});

不幸的是,addOption函数似乎没有为选择框添加选项。更糟糕的是,getOption来电只会返回undefined。另外,如果我将multiple添加到<select>代码,则两个API调用都会按预期工作。

我创建了a Plunker showing the issue

我做错了什么?

1 个答案:

答案 0 :(得分:2)

如果您的选择不是多个,则使用selectize.getValue()来检索当前值。

要添加选项,您必须为该选项提供值属性,并且您只提供text属性。

因此,如果您只想尝试获取所选值:

jQuery(function() {
  var selectize = $('#select').selectize()[0].selectize;

  $('#add-option').on('click', function() {
    selectize.addOption({ value: 99, text: 'Peter Pan' });
  });

  $('#get-option').on('click', function() {
    console.log('Get option:', selectize.getValue());
  });
});

但是在你的例子中,尝试获得值为2的选项似乎是多余的;你知道价值是2.如果你能进一步解释你想要达到的目标,我可以继续帮助。

文档可以更清晰,但它就在那里。 https://github.com/brianreavis/selectize.js/blob/master/docs/api.md#methods_options