javascript - 选择 optgroup 中的所有选项

Question

我有一个 select 元素，其中包含分组的 option。单击 option 时，我需要选择(或取消选择)optgroup 中的所有 option。我还需要能够同时选择多个 optgroup。

我希望它的工作方式是这样的:

• 如果未选择任何内容，我想单击一个选项并选中同一选项组中的所有选项。
• 如果已经选择了一个或多个选项组，我想单击另一个选项组中的一个选项，然后选择所有这些选项。
• 如果已经选择了一个或多个选项组，我希望能够按住 Ctrl 键并单击未选定选项组中的一个选项，并同时选中该选项组中的所有选项。
• 如果已经选择了一个或多个选项组，我希望能够按住 Ctrl 键并单击所选选项组中的一个选项，然后取消选择该组中的所有选项。

查看 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 无法处理 optgroup 或 option 上的 click 事件，这就是我将其绑定(bind)到的原因选择然后使用$(ev.target)。但是在 IE8 中，$(ev.target) 仍然指向整个 select 而不是指向被点击的 option。我如何找出点击了哪个选项(或包含optgroup)以及它是被选中还是被取消选中？

另一个意外的行为，但相比之下是次要的，是在 Chrome (20.0) 中，取消选择不会发生，直到鼠标离开 select。有人知道这个的解决方法吗？

Answer 1

不是选择选项跨浏览器问题的具体问题的答案，我认为已经回答了，但是选择数据并将其传回服务器的问题的解决方案是将您的标记更改为某种东西哪个更适合多选

如果你改用checkboxes，你可以将它们放在一个列表中，并添加增强的js来全选和取消全选

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> ...

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

(这个 fiddle http://jsfiddle.net/Ndkct/44/ 添加了一个父复选框以使其更有用)