选择optgroup中的所有选项

Question

我有一个select分组option的元素.我需要选择(或取消)所有option以S optgroup的时候option被点击.我还需要能够同时选择多个optgroups.

我希望它的工作方式是:

• 如果未选择任何内容,我想单击一个选项并选择同一选项组中的所有选项.
• 如果已经选择了一个或多个optgroup,我想在另一个optgroup中单击一个选项,而是选择所有这些选项.
• 如果已经选择了一个或多个optgroup,我希望能够按住Ctrl键单击未选择的optgroup中的选项,并选择该optgroup中的所有选项.
• 如果已经选择了一个或多个optgroup,我希望能够按住Ctrl键单击所选optgroup中的选项,并取消选择该组中的所有选项.

查看Stack Overflow上的其他答案,我创建了以下内容:

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");
    }
}?

我在这里举了一个例子:http://jsfiddle.net/mflodin/Ndkct/ (可悲的是jsFiddle似乎不再支持IE8了.)

这在Firefox(16.0)中按预期工作,但在IE8中它根本不起作用.从其他答案我发现IE8无法处理click事件optgroup或option,这是我将其绑定到select然后使用的原因$(ev.target).但是在IE8中$(ev.target)仍然指向整个select而不是option点击的那个.如何找出被点击的内容option(或包含内容optgroup)以及是否已选中或取消选中？

另一个意想不到的行为,但相比较小,是在Chrome(20.0)中,取消选择直到鼠标离开时才会发生select.有人知道解决方法吗？

Answer 1

根据您的问题选择/取消选择所有选项。您可以尝试以下代码，可能会对您有所帮助。

代码：

JavaScript 代码：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

       $(function(){

                $('#allcheck').click(function(){
                var chk=$('#select_option >optgroup > option');
                chk.each(function(){
                  $(this).attr('selected','selected');
            });
   });  
$('#alluncheck').click(function(){

              var chk=$('#select_option >optgroup > option');
              chk.each(function(){
              $(this).removeAttr('selected');
          });
     });});

HTML 代码：

       <select multiple="multiple" size="10" id="select_option" name="option_value[]">
          <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>
<br>
       <strong>Select&nbsp;&nbsp;<a style="cursor:pointer;" id="allcheck">All</a>
  &nbsp;|&nbsp;<a style="cursor:pointer;"  id="alluncheck">None</a></strong>