非複数選択ボックスでのSelect APIの使用 - javascript、jquery、selectize.js、plunker

私はシンプルです 選択する 「使用しようとしている」セットアップ 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呼び出しが期待どおりに機能します。

私は作成しました 問題を示すプランカー.

私は間違って何をしていますか？

回答：

複数ではない選択がある場合は、次を使用します selectize.getValue() 現在の値を取得します。

オプションを追加するには、オプションの値プロパティを指定する必要があり、テキストプロパティのみを指定していました。

したがって、選択した値を取得しようとしている場合は、次を使用します。

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