jQueryを使用して選択オプションを切り替えます

Question

複数のオプションを持つセレクタがオプショングループにグループ化されています。オプトグループラベルをクリックしたときに、すべてのオプションの選択/選択解除を切り替えようとしています。

初期ロード時に問題なく動作しますが、セレクタ間でオプションをコピーして戻す機能もあります。オプションがコピーされると、私のトグルは機能しなくなります。

$("optgroup").toggle(function(){ 
    $(this).children().attr("selected", "selected"); 
}, function() { 
    $(this).children().attr("selected", false); 
}); 

ここではcopy/remove scriptです。

Answer 1

これはないはあなたに必要なUXを与えるだろうが、それはトグルイベントはunbindedなって、あなたが持っている問題を解決します：あなたが使用することができますいずれかhttp://jsfiddle.net/rkw79/SwrVK/9/

$("select").delegate('optgroup', 'click', function() { 
    $(this).toggle(function() { 
     $(this).children().attr("selected", "selected"); 
    }, function() { 
     $(this).children().attr("selected", false); 
    }); 
}); 

を.live （）または.delegate（）;問題は、 'クリック'や 'ホバー'のようなベースイベントでのみ動作し、 'トグル'のような派生イベントではない（これが上にラップされた理由です）。

この解決策は、バインド解除の問題を解決することに注意してください。しかし、UXの点では、いくつかの調整が必要です。

更新：UXの追加http://jsfiddle.net/rkw79/SwrVK/15/

は、私はあなたの意図は、グループをクリックしたときにすべての子のオプションを選択することだと思います。以下のコードはそれを行います。

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

以下のコードは、各子オプションを個別に選択できるようにしています。イベントはノードツリー上に伝播しますので、ノードツリーを防止する必要があります（この場合）。

$("select").delegate('option', 'click', function(e) { 
    e.stopPropagation(); 
}); 

Answer 2

問題はトグルイベントをバインドすることと関係しています。オプトグループが選択項目の内外に移動するにつれて、イベントは新しく作成されたオプトグループに関連付けられなくなりました。悲しいことに、トグルイベントのライブバインディングはありません。

$("optgroup").live("click", function() { 
    var $children = $(this).children(); 
    if($children.attr("selected")) { 
     $children.attr("selected", false); 
    } else { 
     $children.attr("selected", "selected"); 
    } 
}); 

これは、これまでのページで作成した任意のoptgroupsにクリックイベントを結合し、いくつかの予期せぬ副作用を持つことができ、心に留めておくください：あなたは、仕事のようなもので行われます、一緒に何かをハックすることができます。このリスクを軽減するためには、クラスを使用してライブを使用することをお勧めします。

http://jsfiddle.net/Lw6QC/