4

グループ化されたアイテムを含むドロップダウンボックスを作成したいと思います。これは、私が使用しているデータベースルックアップHTMLフォーム用です。グループタイトルを選択して、その特定のグループのすべてのアイテムを選択する方法はありますか？たとえば、グループタイトルが「GermanCars」で、アイテムが「Mercedes」と「Audi」の場合、「German Cars」をクリックすると、両方のドイツの自動車会社が選択されます。

4

2 に答える 2

1

opt-groupsにクラスを与えると、クラスを選択してその子にアクセスできます。

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

それが利用できない場合、代替手段は少し遅いです。すべてのoptgroupをループして、それらのテキストを個別に比較したら、その子を取得します。

編集：セレクターを修正します。そして詳しく説明します：

次に、クリックしてそれらを選択するには、次のようにします。

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

要素が複数選択に設定されていると仮定します。そうしないと、リストの最後の車だけが選択されます。

編集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に変更したので、ブラウザーがmousedownイベントを処理する前に要素の状態を確認できます。これにより、それらがすべて選択されているかどうかを確認し、選択されている場合は、選択するのではなく選択を解除できます。また、のクリックイベントについても同じことを行う必要がありましたoption。これにより、そのイベントでの伝播を防ぐことができます。

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

于 2012-02-15T16:41:55.257 に答える
0

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

その後、さまざまな方法でこれに対処できます。サーバー側でシチュエーションを処理するだけで、「ドイツ車」がチェックされている場合、フォームハンドラーは、ドイツ車のすべてのチェックボックスが選択されているかのように動作します。または、「ドイツ車」チェックボックスのクライアント側ハンドラーを追加して、チェックボックスをオンにすると個々のチェックボックスがオンになるようにすることもできます（ただし、オフにした場合はオフにする必要があります）。

于 2012-02-15T17:13:20.987 に答える