javascriptまたはjQueryのselect2（version 3.5）ドロップダウンリストのselectedindexを設定する方法

Question

簡単な質問ですが、まだ答えはありません。 Select2ドロップダウンリストのselectedIndexを序数で設定することはできますか？私は、セレクト2バージョン3.5.2を使用してのような値を使用して、選択したアイテムを持っていることが非常に簡単見つけるよ：

$(elem).select2('val','my value',false); 

しかし、序を通じて選択をしようと、私を完全にエスケープします。 Selectセレクトして、通常のドロップダウンで動作しますが、ないもののいくつかの例：

$(elem + " option")[1].selected = true; //no worky 
$(elem + " option:eq(1)").attr("selected", "selected"); //no worky 
$(elem).prop({ selectedIndex: 1 });//no worky 

私はSelectセレクトは、最初のオプションを使用すると、これは、最初のものではありませんデフォルトの選択を持つことである必要がある理由（インデックス：0 ）ヒントを埋めるために、私はIndex：1にデフォルト設定したい（そしてそれらは多くの異なる値を持つことができるので、値を介して選択したオプションを設定することはできません - 序数でなければなりません）

UPDATE ： 問題はここにある可能性があります（すべての選択項目と必要な空白オプションの値が空です） - 混乱する可能性があります。

<option selected="selected" value=""></option> 
<option value="">All Sizes</option> 
<option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option> 
<option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option> 
<option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option> 
<option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option> 
<option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option> 
<option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option> 
<option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option> 
<option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option> 
<option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option> 
<option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option> 

私は最初のオプションに値（「すべてのサイズ」、「すべての色」、「在庫品のみ」、「販売カテゴリのみ」など）を与え、「 - "最初の項目としてデータベースから（そう、私は比較する必要はありません）。それはまだselectedIndexの（多くの更新すべき古いコードの）を設定するとよいでしょう を - 私は、Selectセレクト

UPDATEの今後の改訂のための彼らの要求でそれを投稿します： ここでは関数は

function setDD(elem, qs) { 
    var q = QueryString(qs); 
    if (!(typeof q === "undefined")) { 
     if (q === '') { 
      //$(elem + " option")[1].selected = true; //no worky 
      //$(elem + " option:eq(1)").attr("selected", "selected"); //no worky 
      //$(elem).prop({ selectedIndex: 1 });//no worky 
      //$(elem).find("option:eq(1)").prop("selected", "selected"); //no worky 
      //$(elem + " option:eq(1)").prop("selected", "selected"); //no worky 
      //$(elem).prop('selectedIndex', 1).change(); //no worky 
     } else { 
      $(elem).select2('val', q, false); 
     }; 
    }; //else leave the dropdown at its default to show the hint (until user actually makes a selection) 
}; 

次のようになります。

Answer 1

$('select').val('US'); // Change the value or make some change to the internal state 
$('select').trigger('change.select2'); // Notify only Select2 of changes 

これを試してみてください。

Answer 2

jQuery Select2コントロールでは、序数インデックスでオプションを選択できません。 唯一の解決策は、選択したオプションをその値で設定することです（少なくともバージョン3.5では）。 私はこの答えが嫌いです！

Answer 3

Select2はインデックスで選択する方法を提供しませんが、インデックスを使用して基礎となる<select>要素の値を設定できます。もちろん、基礎となる<select>要素の値を変更するときは、イベントをトリガーして、Select2コントロールが一致するように自身を更新する必要があることを知る必要があります。

だから、あなたが行うことができます：

$(elem).prop('selectedIndex', 1).change(); 

---

しかし、これは選択されたインデックスが一意の値を持たないオプションを参照している場合仕事に行くのではありません。 Select2コントロール自体が更新されると、その選択されたインデックスではなく、基になる<select>要素の値が参照されます。一般的なケースでは

var $option = $(elem).children().eq(1); 
$(elem).select2('data', { id: $option.val(), text: $option.text() }); 

、1つの問題I：このような

もちろん、あなたが値によって非ユニークなオプションを選択することはできませんが、Selectセレクト「データ」メソッドを使用して試みることができ、 Select2を開いたとき（つまり、ドロップダウンが表示されているとき）、強調表示されているオプションは、一意でない値を持つリストの最初のものです。ユーザーがTabキーを押すと、そのオプションが選択されたオプションになります。

jsfiddle

しかし、唯一の非ユニークなオプションが空の値を持つ2つのオプションがあり、あなたの限界の場合、ため、と何のテキスト（すなわち、空のボディを）持っていない最初のものは、上記のコードは、表示されます働く

allowClearオプションをtrueに設定して、「プレースホルダ」オプションを指定しているとします。さもなければ、ユーザーは決して空のオプションに戻ることができません。 （なぜそれを持っている。）

jsfiddle