6

複数のオプションを選択できる選択ボックスがあります。選択ボックスには複数の optgroup があります。javascriptでoptgroup全体を一度に選択する簡単な方法はありますか?

4

4 に答える 4

4

私は通常、このような単純なジョブに jQuery を使用することに反対していますが、ここでその価値を確認できます。それでも、ライブラリを使用せず、偽の ID やクラスを導入せず、高速に実行できるという利点がある非 jQuery ソリューションを好む場合は、次の 1 つを使用します。

<script type="text/javascript">

function selectOptGroupOptions(optGroup, selected) {
    var options = optGroup.getElementsByTagName("option");
    for (var i = 0, len = options.length; i < len; i++) {
        options[i].selected = selected;
    }
}

function selectOptGroup(selectId, label, selected) {
    var selectElement = document.getElementById(selectId);
    var optGroups = selectElement.getElementsByTagName("optgroup");
    var i, len, optGroup;
    for (i = 0, len = optGroups.length; i < len; i++) {
        optGroup = optGroups[i];
        if (optGroup.label === label) {
            selectOptGroupOptions(optGroup, selected);
            return;
        }
    }
}

</select>

<select id="veg" multiple>
    <optgroup label="roots">
        <option>Swede</option>
        <option>Carrot</option>
        <option>Turnip</option>
    </optgroup>
    <optgroup label="leaves">
        <option>Spinach</option>
        <option>Kale</option>
    </optgroup>
</select>

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots">

id がある場合は、関数を省略して optgroup を に直接渡す<optgroup>ことができます。selectOptGroupselectOptGroupOptions

于 2009-09-25T09:13:34.897 に答える
4

DOM の選択をすばやく処理するには、jQuery (または別のフレームワーク) を使用することをお勧めします。各 optgroup にクラスを与えて、簡単に取得できるようにします。

$("optgroup.className").children().attr('selected','selected');

グループを選択したユーザーに基づいてグループ全体を選択する場合は、次の手順を実行します。

$("optgroup.className").select(function(e) {
  $(this).children().attr('selected','selected');
});

**どちらの例もテストされていない疑似コードですが、必要に応じて最小限の変更で動作するはずです。

フレームワークを使用できない場合は、自分で DOM をトラバースして optgroup と子を見つける必要があります。要素にリスナーをアタッチして、select選択されている要素を取得し、その方法で子にトラバースすることもできます。

于 2009-09-24T20:32:03.617 に答える
2

jquery:

$('#myoptgroup option').attr('selected', true);
于 2009-09-24T20:26:41.320 に答える
2

私は今、似たようなことをしようとしていました。

グループのラベルをクリックしてを選択したかった<optgroup>のです。<option>最初の試みは次のようになりました。

$('select > optgroup').click(function () {
    $(this).children().attr('selected', true);
});

この解決策は半分うまくいきました...

<optgroup>のラベルをクリックすると、そのすべての子が選択されました。

しかし、単にクリックすると、グループ内<option>の他のすべての が選択されたまま<option>になります! 問題はイベントのバブリングでした。技術的にはあなたもそれをクリックしているためです<option>。<optgroup>

<option>したがって、パズルの最後のピースは、代わりに が実際にクリックされた場合にイベントが上向きにバブリングするのを抑制することでした。最終的な解決策は次のようになりました。

$('select > optgroup').click(function () {
    $(this).children().attr('selected', true);
});

$('select > optgroup > option').click(function (e) {
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
});

仕事終わり！

編集

腹立たしいことに、これはIE8では機能しません（そして疑わしい<IE8-おそらくIE9？）...

要素と 要素の両方でクリック イベントを完全に無視することにします。私が考えることができる唯一の代替手段は、optgroup ラベルの上に要素を配置してクリックをキャプチャすることですが、おそらく努力する価値はありません...

于 2010-10-05T03:32:32.243 に答える