選択肢の中のoptgroup全体を簡単に選択する簡単な方法

Question

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

Answer 1

。それぞれのオプトグループに、それをつかみやすくするためのクラスを与えます。

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

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

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

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

フレームワークを使用できない場合は、DOMをトラバースしてオプトグループと子を見つけなければなりません。 select要素にリスナーを付けて、選択されている要素をつかんでその方法で子要素に移動することもできます。

Answer 2

jqueryの：私はすぐにDOMの選択を処理するためにjQueryの（または他のフレームワーク）を使用することをお勧め

$('#myoptgroup option').attr('selected', true); 

Answer 3

私は通常、このような単純なジョブでは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"> 

ご<optgroup>は、あなたができるIDを持っている場合離れてselectOptGroup関数とoptgroupをselectOptGroupOptionsにまっすぐに渡します。

Answer 4

私は今のところ同様のことをしようとしていました。

グループのラベルをクリックすると、<optgroup>のが選択されました。

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

このソリューションの半分そのすべての子が選択になった<optgroup>のラベルをクリックすると...

を働いた：最初の試みは、次のように行ってきました。

しかし単にそれはまだグループ内の他のすべての<option> Sを選択した<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(); 
}); 

ジョブが完了しました！

EDIT

InfuriatinglyこれはIE8での作業を動作しません（と疑わしい< IE8 - ？多分IE9）...

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