Select2 で値を事前に選択する方法: バージョン 4 以下のガイド?

Select2 で値を選択する方法?

Select2 は、カスタマイズ可能な選択ボックス ウィジェットを提供する jQuery プラグインです。この記事では、Select2 に事前に選択された値を設定する方法を説明します。

Select2 <バージョン 4

1. HTML: まず、Select2 入力フィールドを ID を持つ隠しフィールドとして定義します:

<code class="html"><input type="hidden" name="programid" id="programid" class="width-500"><ol start="2">
<li>
<strong>Select2 の初期化:</strong> Select2 のインスタンスを作成し、データを取得するための AJAX 呼び出しなど、必要なオプションを使用して構成します。</li>
<li>
<strong>事前に選択された値を設定:</strong> select2 を使用します。 ('data', { id: "selectedID", text: "selectedText" }) 選択された値を設定するメソッド。</li>
</ol>
<h3>Select2 バージョン 4 以降</h3>
</h3>
<p>Select2 v4 および上記では、アプローチが少し異なります:</p>
<ol><li>
<strong>HTML:</strong> Select2 入力フィールドを、オプションと選択された属性を持つ標準の選択要素として定義します:</li></ol>
<pre class="brush:php;toolbar:false"><code class="html"><select id="mySelect2" name="mySelect2[]">
  <option value="TheID" selected="selected">The text</option>                                                                   
</select></code>

2. オプションの追加: 初期化後に値を設定するには、事前に選択したオプションを Select2 フィールドに追加できます:

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

3. val() メソッドを使用します: または、val() メソッドの後に .trigger('change') を使用して値を設定することもできます:

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

これらのメソッド使用しているバージョンに関係なく、Select2 で事前に選択された値を設定する簡単な方法を提供します。

以上がSelect2 で値を事前に選択する方法: バージョン 4 以下のガイド?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。