javascript - 在非多个选择框中使用Selectize API

我有一个简单的Selectize设置，试图在其中使用getOption和addOption方法。

<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>

我已经在selectize实例上编写了一些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。

我究竟做错了什么？

最佳答案

如果选择不多，则使用selectize.getValue()检索当前值。

要添加一个选项，您必须为该选项提供一个value属性，而您只提供了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

关于javascript - 在非多个选择框中使用Selectize API，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24327681/