私は複数のオプションを選択できる選択ボックスがあります。選択ボックスには複数のoptgroupがあります。 javascriptでoptgroup全体を簡単に選択する簡単な方法はありますか?選択肢の中のoptgroup全体を簡単に選択する簡単な方法
答えて
。それぞれのオプトグループに、それをつかみやすくするためのクラスを与えます。
$("optgroup.className").children().attr('selected','selected');
あなたがグループを選択するユーザーに基づいてグループ全体を選択する場合は、次の手順を実行します。
$("optgroup.className").select(function(e) {
$(this).children().attr('selected','selected');
});
**両方の例は、テストされていない擬似コードですが、彼らは最小限で動作するはずです必要に応じて変更されます。
フレームワークを使用できない場合は、DOMをトラバースしてオプトグループと子を見つけなければなりません。 select
要素にリスナーを付けて、選択されている要素をつかんでその方法で子要素に移動することもできます。
jqueryの:私はすぐにDOMの選択を処理するためにjQueryの(または他のフレームワーク)を使用することをお勧め
$('#myoptgroup option').attr('selected', true);
私は通常、このような単純なジョブでは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
にまっすぐに渡します。
私は今のところ同様のことをしようとしていました。
グループのラベルをクリックすると、<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)...
両方と要素のクリックイベントを完全に無視することにします。私が考えることができる唯一の代替案は、クリックをキャプチャするためにオプトグループのラベルの上に要素を配置することですが、おそらくその努力の価値はありません。
- 1. netBeansで行を選択する簡単な方法
- 2. Python 2.5のリストの選択が簡単
- 3. getSelectionで単語全体を選択
- 4. ユーザーロケールの選択をHTMLで覚えるのが最も簡単な方法
- 5. Cでregexの選択肢を簡単に取得する方法はありますか?
- 6. 好ましい変数値を選択する最も簡単な方法
- 7. メソッド全体をスレッドセーフにする最も簡単な方法は?
- 8. Android:選択肢を一度に選択する方法AlertDialog?
- 9. 選択肢から選択肢を選択し、表のセルに選択肢の情報を表示
- 10. 予期せず簡単なメニュー選択とバブル動作
- 11. 簡単なLinq質問:複数の列を選択するには?
- 12. optgroupグループのタイトルを選択
- 13. 選択タグでoptgroupのラベルを選択する方法はありますか?
- 14. 特定のUIWebViewの選択(単語/文全体のみ)
- 15. jQueryでテキストエリア内の単語全体を選択
- 16. (Redis)クライアント全体を簡単にラップする方法
- 17. html選択肢をリストに選択
- 18. Djangoの選択肢非選択フィールド
- 19. 更新要素、選択肢の選択
- 20. UITableView - 複数選択と単一選択
- 21. 選択肢プロパティ
- 22. (簡単な方法)
- 23. 簡単な方法
- 24. 簡単な方法
- 25. 簡単な方法
- 26. jsonで簡単に印刷する方法簡単なJavaライブラリ
- 27. 遅延ロードの単体テストテストの簡単な方法
- 28. JS:テキストフィールドからの数値選択だけでなく、簡単な計算?
- 29. D3のツリーで親ノードの複数の親を選択する最も簡単な方法
- 30. 複数選択ドロップダウンwith optgroup
まあ私はjQueryを使わないで解決策を見つけようとしていました。しかし、それを行う簡単な方法を見て、もう一方の側:ドームを横切って.... Jqueryです。 – blub
@blub - 多くの人がjQueryにそのように取り入れると思います。 ;-) –
自分でDOMをトラバースすることは大変難しいことではありませんが、フレームワークによって簡単にできます。 'document.getElementById( 'selectElementID')'はあなたにselect要素自体を与えます。次に、子をたどることだけです。イベントリスナーを追加してselectイベントをキャプチャし、希望のoptgroupの場合は解析することもできます。そうであれば、optgroupの子をトラバースして選択することもできます。 –