素早く複数選択リストボックス項目のプリセットを選択するために、JavaScriptやjQueryのを使用する方法?

StackOverflow https://stackoverflow.com/questions/2179529

  •  24-09-2019
  •  | 
  •  

質問

だから私のページがインデックス「1,3,4,5,9,12」のリストとその中の12個のアイテムを複数選択リストボックスを持っていると言っています。

これらのインデックスにマルチ選択したすべての項目にリストボックスを伝えるために使用するJavaScriptに高速な方法は?何

どのようにこれはjQueryのを使用して行われるのでしょうか?

ユーザーがプリセット「candybar」リストボックスに関連付けられている「キャラメル」を選択したのであれば、たとえば、それはキャラメルを持っているすべてのキャンディーバーを選択します...私はあなたのアイデアを得ると思います。

役に立ちましたか?

解決

このトリックを行うことができます:

<select id="select" multiple="multiple">
    <option value="1">test 1</option>
    <option value="2">test 2</option>
    <option value="3">test 3</option>
    <option value="4">test 4</option>
    <option value="5">test 5</option>
    <option value="6">test 6</option>
    <option value="7">test 7</option>
    <option value="8">test 8</option>
    <option value="9">test 9</option>
    <option value="10">test 10</option>
    <option value="11">test 11</option>
    <option value="12">test 12</option>
</select>

のJavascript(jQueryの):

indexes = [1,3,4,5,9,12]
$(document).ready(function(){
    for(i=0; i<indexes.length; i++){
        $('#select option:eq(' + (indexes[i]-1) + ')').attr('selected', 'selected');
    }
});

jQueryをなします:

window.onload = function(){
    var indexes = [1,3,4,5,9,12];
    var options = document.getElementById('select').options;
    for(i=0; i<indexes.length; i++){
        options[indexes[i]-1].selected = true;
    }
}

他のヒント

のjQuery プラグインの選択は、複数の値を選択selectOptions(value[, clear])方法を有します選択ボックスインチしかし、それは代わりに、指標のパラメータとして値をとります。

あなたはオプションの要素にクラスを設定し、それらをそのように対処オフではなく、インデックスによって良くなると思います:

<select id="my-select">
  <option class="caramel">Twix</option>
  <option>Mounds</option>
  <option class="caramel">Milky Way</option>
  <!-- ... -->
</select>

そして

$("option.caramel", "#my-select").each(function () { this.selected = true });

編集ます:

しかし、あなたが本当にインデックスでそれをしたい場合は、あなたが行うことができます:

function selectOptionsByIndex(select, indexes) {
    var i = 0;
    select.children().each(function (j) { if (indexes[i] == j) { ++i; this.selected = true } });
}

selectOptionsByIndex($("#my-select"), [ 1, 3, 4, 5, 9, 12 ]);

(これは昇順である、供給されたインデックスのリストに依存する。)

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top