jQuery Select2 で選択された値をプログラムで設定する方法は?

jQuery Select2 の選択値を設定するには?

jQuery Select2 は、select 要素の使いやすさを向上させる人気のプラグインです。その便利な機能の 1 つは、選択した値をプログラムで設定できることです。これは、最初のページの読み込み時、または以前に保存した選択内容を編集するときに、事前定義された値を表示する必要があるシナリオで特に役立ちます。

Select2

ステップ 1: HTML マークアップ

選択した値を保持する非表示の入力フィールドを含めます:

<code class="html"><input type="hidden" name="mySelect2" id="mySelect2"></code>

ステップ 2: Select2 インスタンスを作成します

適切なオプションを使用して Select2 を初期化します。

<code class="js">$("#mySelect2").select2({
  placeholder: "My Select 2",
  multiple: false,
  minimumInputLength: 1,
  ajax: {
    url: "/elements/all",
    dataType: 'json',
    quietMillis: 250,
    data: function(term, page) {
      return {
        q: term,
      };
    },
    results: function(data, page) {
      return { results: data };
    },
    cache: true
  },
  formatResult: function(element){
    return element.text + ' (' + element.id + ')';
  },
  formatSelection: function(element){
    return element.text + ' (' + element.id + ')';
  },
  escapeMarkup: function(m) {
    return m;
  }
});</code>

ステップ 3: 必要な値を設定します

data() メソッドを使用して選択した値を設定します:

<code class="js">$("#mySelect2").select2('data', { id: "elementID", text: "Hello!"  });</code>

Select2 V4

HTML を使用

Select2 v4 の場合、選択したオプションを select 要素に追加:

<code class="html"><select id="myMultipleSelect2" multiple name="myMultipleSelect2[]">
    <option value="TheID" selected>The text</option>
</select></code>

jQuery を使用する

<code class="js">var $newOption = $("<option selected></option>").val("TheID").text("The text");
$("#myMultipleSelect2").append($newOption).trigger('change');</code>

値を直接設定する

<code class="js">$("#myMultipleSelect2").val(5).trigger('change');</code>

以上がjQuery Select2 で選択された値をプログラムで設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。