optgroupグループのタイトルを選択

Question

グループ化されたアイテムを含むドロップダウンボックスを作成したいと思います。これは、私が作業しているデータベースの参照HTMLフォームです。グループタイトルを選択して特定のグループのすべてのアイテムを選択できる方法はありますか？たとえば、グループタイトルが「ドイツ車」で、「メルセデス」と「アウディ」の項目を持っている場合は、「ドイツ車」をクリックすると、ドイツの自動車会社が選択されます。

Answer 1

オプト・グループにクラスを与えると、そのクラスを選択してその子にアクセスできます。

$('.german-cars').children(); 

これが利用できない場合は、少し遅いです。すべてのオプトグループをループしてテキストを個別に比較し、その子を取得します。

edit：修正セレクタ。 そしてエラボレーション：次に

あなたが使用したいクリックでそれらを選択する：

$('.german-cars').click(function(e) { 
    e.preventDefault(); 
    $(this).children().attr('selected', 'selected'); 
}); 

要素が複数選択に設定されていると仮定。それ以外の場合は、リスト内の最後の車のみが選択されます。

EDIT 2

フィドル：http://jsfiddle.net/mbChZ/25/

これらの変更は、あなたが探しているように動作しなければなりません。

$(function() { 
    $('select optgroup').mousedown(function(e) { 
     e.preventDefault(); 
     if ($(this).children(':selected').length == $(this).children().length) { 
      $(this).children().attr('selected', null); 
     } else { 
      $(this).children().attr('selected', 'selected'); 
     } 
    }); 
    $('select option').mousedown(function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).attr('selected', ($(this).is(':selected'))? null : 'selected');      
    }); 
});​ 

私はブラウザはすでにマウスダウンイベントを処理した前に、私たちは、要素の状態を見ることができるのMouseDownするイベントを変更しました。これにより、すべて選択されているかどうかを確認することができ、そうであれば選択するのではなく選択を解除します。そして、そのイベントで伝播を防ぐことができるように、optionのクリックイベントに対しても同じことが行われなければならなかった。

私はあなたがサポートしている場合は、それが古いIEで動作することを確認したいかもしれませんが、これにブラウザの互換性の100％ではない。

Answer 2

信頼できる方法ではありません。 optgroupは、グループ化オプションのためのものであり、機能に影響するものではありません。しかし、select要素の代わりに一連のチェックボックスを使用すると、 "ドイツ車"のチェックボックスを使用することができます。その下にインデントされた、ドイツの異なる車種のチェックボックス。

これをさまざまな方法で処理できます。 「ドイツ車」がチェックされていれば、フォームハンドラはドイツ車の各チェックボックスが選択されているかのように機能するように、サーバー側の状況を処理できます。または、「ドイツ車」チェックボックスのクライアントサイドハンドラを追加して、個々のチェックボックスをチェックするようにすることもできます（チェックをはずすとチェックを外す必要があります）。