web-dev-qa-db-ja.com

jQuery：<select>要素で選択された値の<optgroup>を検索します

さまざまなオプショングループのドロップダウンメニューがあります。誰かがオプションを選択した場合、それがどのオプトグループに属しているかを確認するにはどうすればよいですか？たとえば、「フェラーリ」が選択された場合、それがどのオプトグループに属しているかをどのように判断しますか？

JQueryまたは生のjavascriptを自由に使用してください。

<select name="testSelect">
   <optgroup label="fruits">
      <option value="apples">Apples</option>
      <option value="oranges">Oranges</option>
      <option value="pears">Pears</option>
   </optgroup>
   <optgroup label="cars">
      <option value="ford">ford</option>
      <option value="toyota">toyota</option>
      <option value="ferrari">ferrari</option>
   </optgroup>
</select>
javascriptjqueryhtmloption
11
Don P

これはjQueryを使用して行うことができます。

$('select').change(function() {
    var selected = $(':selected', this);
    alert(selected.closest('optgroup').attr('label'));
});​

ここで実際の例を参照してください： http://jsfiddle.net/jkeyes/zjLCp/1/

更新：はい、parenthttp://jsfiddle.net/jkeyes/zjLCp/2/ を使用できます==

selected.parent()
30
John Keyes

まあ、純粋なjsでは：

this.options[this.selectedIndex].parentNode.label

単一の関数呼び出しではなく、起動するコードも少なくて済みます。 :-)

13
RobG