选择optgroup中的所有选项 [英] Select all options in optgroup

问题描述

我有一个选择元素，分组为选项 s。当选项选项时，我需要选择（或取消选择） optgroup / code>被点击。我还需要能够一次选择多个 optgroup s。

我希望这样做工作是这样的：

• 如果没有选择任何东西，我想单击一个选项并获得选定的相同optgroup中的所有选项。 / li>
  
• 如果已经选择了一个或多个optgroup，我想单击另一个optgroup中的一个选项，并选择所有这些选项。


• 我已经选择了更多的optgroups，我希望能够按住Ctrl键并点击未选择的optgroup中的一个选项，并选择该optgroup中的所有选项。


• 如果一个或多个optgroups已被选中，我希望能够按住Ctrl键并点击所选optgroup中的某个选项，并取消选中该组中的所有选项。
  

看看堆栈溢出的其他答案我创建了以下内容：

HTML：

 < select multiple =multiplesize =10> 
< optgroup label =Queen> 
< option value =Mercury> Freddie< / option> 
< option value =May> Brian< / option> 
< option value =Taylor> Roger< / option> 
< option value =Deacon> John< / option> 
< / optgroup> 
< optgroup label =Pink Floyd> 
< option value =Waters> Roger< / option> 
< option value =Gilmour> David< / option> 
< option value =Mason> Nick< / option> 
< option value =Wright> Richard< / option> 
< / optgroup> 
< / select> 
  

jQuery：

  $（ '选择'）点击（selectSiblings）。 
函数selectSiblings（ev）{
 var clickedOption = $（ev.target）; 
 var siblings = clickedOption.siblings（）; 
 if（clickedOption.is（：selected））{
 siblings.attr（selected，selected）; 
} else {
 siblings.removeAttr（selected）; 
 
 
 
 
 
 
 
我在这里做了一个例子： http://jsfiddle.net/mflodin/Ndkct/  
（可悲的是jsFiddle似乎不支持IE8 ）
 
 
 
这在Firefox（16.0）中按预期工作，但在IE8中根本不起作用。从其他答案中我发现IE8无法处理 optgroup 或点击事件> option ，这就是我将它绑定到选择然后使用 $（ev.target） code>。但在IE8中， $（ev.target）仍然指向整个 select ，而不是指向选项被点击。我如何知道被点击的选项（或包含 optgroup ），以及是否已选择或取消选择
 
 
 
另一个意想不到的行为，但比较小的是，在Chrome（20.0）中，直到鼠标离开选择。有人知道这个解决方法吗？ 
 
解决方案
不是选择选项跨浏览器问题的具体问题的答案，我认为已经得到了回答，但是选择数据并将其传递回服务器的问题的一个解决方案是将标记更改为适合多选的数据。如果您使用的是更好的选择，则可以使用 
 
复选框，你可以把它们放在一个列表中，并添加enhanching js来选择全部并全部取消选择。
 $ b $ p  http://jsfiddle.net/Ndkct/43/   $ b 
 < ; DL> 
< dt>皇后< / dt> 
< dd> 
< ul> 
< li> 
< input id =Mercuryname =bandmembersvalue =Mercurytype =checkbox/> 
< label for =Mercury> Freddie< / label> 
< / li> 
< li> 
< input id =Mayname =bandmembersvalue =Maytype =checkbox/> 
< label for =May> Brian< / label> 
< / li> 
< li> 
< input id =Taylorname =bandmembersvalue =Taylortype =checkbox/> 
< label for =Taylor> Roger< / label> 
< / li> 
< li> 
< input id =Deaconname =bandmembersvalue =Deacontype =checkbox/> 
< label for =Deacon> John< / label> 
< / li> 
< / ul> 
< / dd> 
< dt> Pink Floyd< / dt> ... 
  
 js现在够简单了
  $（dt）
 .css（cursor，pointer）
 .click（function（）{
 var $ el = $（this）.next（）; 
 var $ checks = $ el.find（：checkbox）; 
 if（$ checks.is（：not（：checked）） ）{
 $ checks.attr（checked，true）; 
} else {
 $ checks.attr（checked，false）; 
} 
 }）; 
  
（this fiddle  http://jsfiddle.net/Ndkct/44/ 添加了一个父复选框，使其更加可用）
 
I have a select element with grouped options. I need to select (or deselect) all options in an optgroup when an option is clicked.  I also need to be able to have multiple optgroups being selected at once.

The way I wish it to work is this:


If nothing is selected, I want to click one option and get all of the options in the same optgroup selected.
If one or more optgroups are already selected, I want to click one option in another optgroup and have all those options selected instead.
If one or more optgroups are already selected, I want to be able to Ctrl-click an option  in a non-selected optgroup and have all of the options in that optgroup selected too.
If one or more optgroups are already selected, I want to be able to Ctrl-click an option in a selected optgroup and have all the options in that group deselected.


Looking at other answers on Stack Overflow I created the following:

HTML:
<select multiple="multiple" size="10">
    <optgroup label="Queen">
        <option value="Mercury">Freddie</option>
        <option value="May">Brian</option>
        <option value="Taylor">Roger</option>
        <option value="Deacon">John</option>
    </optgroup>
    <optgroup label="Pink Floyd">
        <option value="Waters">Roger</option>
        <option value="Gilmour">David</option>    
        <option value="Mason">Nick</option>                
        <option value="Wright">Richard</option>
    </optgroup>
</select>
jQuery:
$('select').click(selectSiblings);
function selectSiblings(ev) {
    var clickedOption = $(ev.target);
    var siblings = clickedOption.siblings();
    if (clickedOption.is(":selected")) {
        siblings.attr("selected", "selected");
    } else {
        siblings.removeAttr("selected");
    }
}​
I made an example here: http://jsfiddle.net/mflodin/Ndkct/
(Sadly jsFiddle doesn't seem to support IE8 any more.)

This works as expected in Firefox (16.0), but in IE8 it doesn't work at all. From other answers I have found out that IE8 can't handle the click event on optgroup or option, which is the reason I bind it to the select and then use $(ev.target). But in IE8 the $(ev.target) still points to the entire select and not to the option that was clicked. How can I find out which option (or containing optgroup) that was clicked and whether it was selected or deselected?

Another unexpected behaviour, but minor in comparison, is that in Chrome (20.0) the deselect doesn't happen until the mouse leaves the select. Does anybody know a workaround for this?
​
解决方案
not an answer to the specific question of select option cross browser issues, I think that's been answered already, but a solution to the problem of selecting the data and passing it back to the server would be to change your mark up to something which better suits multi selection

if you use checkboxes instead, you can put them in a list and add enhanching js to select all and deselect all

http://jsfiddle.net/Ndkct/43/
<dl>
<dt>Queen</dt>
<dd>
    <ul>
        <li>
            <input id="Mercury" name="bandmembers" value="Mercury" type="checkbox" />
            <label for="Mercury">Freddie</label>
        </li>    
        <li>
            <input id="May" name="bandmembers" value="May" type="checkbox" />
            <label for="May">Brian</label>
        </li>    
        <li>
            <input id="Taylor" name="bandmembers" value="Taylor" type="checkbox" />
            <label for="Taylor">Roger</label>
        </li>    
        <li>
            <input id="Deacon" name="bandmembers" value="Deacon" type="checkbox" />
            <label for="Deacon">John</label>
        </li>    
    </ul>
</dd>
<dt>Pink Floyd</dt> ...
The js is now simple enough
$("dt")
    .css("cursor","pointer")
    .click(function(){
        var $el = $(this).next();
        var $checks = $el.find(":checkbox");
        if($checks.is(":not(:checked)")){
           $checks.attr("checked",true); 
        }else{
           $checks.attr("checked",false); 
        }
    });
(this fiddle http://jsfiddle.net/Ndkct/44/ adds a parent checkbox to make it more usable)

                        
这篇关于选择optgroup中的所有选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！