0

つまり、私のページにインデックス「1、3、4、5、9、12」のリストと、12個のアイテムを含む複数選択リストボックスがあるとします。

javascriptを使用して、これらのインデックスですべてのアイテムを複数選択するようにリストボックスに指示する高速な方法は何ですか？

これはjQueryを使用してどのように行われますか？

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

4

3 に答える 3

1

これはトリックを行うことができます：

<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;
    }
}
于 2010-02-01T19:55:20.763 に答える
0

インデックスではなく、オプション要素にクラスを設定し、そのようにアドレス指定する方がよいでしょう。

<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 ]);

（これは、提供されたインデックスの昇順のリストによって異なります。）

于 2010-02-01T19:47:39.930 に答える
0

jquery selectプラグインselectOptions(value[, clear])には、選択ボックスで複数の値を選択するメソッドがあります。ただし、インデックスではなくパラメータとして値を取ります。

于 2010-02-01T19:48:54.737 に答える