web-dev-qa-db-ja.com

現在選択されているSelectize.js入力項目の値を取得する方法

Selectize.js入力で現在選択されているアイテムの値を取得するにはどうすればよいのでしょうか？私はドキュメントをチェックし、Stackoverflowに関連するselectize.jsをすべて精査しましたが、例から外れることはありませんでした。何か案は？これは、ドキュメントに基づいて機能すると思ったものですが、代わりにUndefined is not a functionエラー。

コードの一番下に注意してください。select.on('change';これは（他のAPIメソッドに加えて）私が試したことです。 on changeは完全に機能しますが、残念ながら他には何もありません。

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());
});
javascriptjqueryjquery-pluginsselectize.js
33
twilco

問題が見つかりました！

selectize.jsを使用していてAPIに問題がある場合は、これを試してください！

Selectize.jsドロップダウンを初期化したコードの部分を見ると、インスタンスを「select」変数に格納しているだけです。しかし、これは（少なくとも私が見たものから）物事を行うための適切な方法ではありません。単にインスタンスを変数に格納するだけでなく、次のことを行う必要があります。

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

var selectizeControl = $select[0].selectize

これを行った後、APIを適切に使用できます。このようにしないと、Undefined is not a functionエラー。

最後に、自分の質問に答えるために、次のコードを使用して、selectize入力の現在の値を取得できました（.on（ 'change'）とalertは明らかに不要です）。

selectizeControl.on('change', function() {
      var test = selectize.getValue();
      alert(test);
});

なぜこの方法でそれを行う必要があるのか​​、正確にはわかりません。おそらく、誰かがこの方法が機能し、以前の方法が機能しなかった理由について、私と将来の視聴者に啓発することができます。

これが将来他の誰かに役立つことを願っています。自由に編集して変更を加えてください。

37
twilco

後でイベントを添付するのではなく、初期化でそれを行うことができます。

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 をご覧ください。

31
basher

私のテストでは、selectize imediatellyは_<select>_の値を 'replaced'に更新します（実際には_<select>_を使用して_display: none_のみを非表示にします）。

したがって、グローバル変数もコールバックも使用したくない場合は、次のように簡単です：

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

4
sandre89