Question

我有一个选择框，我可以在其中选择多个选项。在选择框中有多个optgroups。有没有一种简单的方法可以在javascript中一次选择整个optgroup？

Answer 1

我建议使用jQuery（或其他框架）快速处理DOM选择。为每个optgroup提供一个类，以便更轻松地抓取它。

$("optgroup.className").children().attr('selected','selected');

如果要根据用户选择组选择整个组，请执行以下操作：

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

**两个示例都是未经测试的伪代码，但如果需要，它们应该在最小的更改下工作。

如果你不能使用框架，你必须自己遍历DOM以找到optgroup和children。您可以将一个侦听器附加到select元素以获取正在选中的元素，然后也以这种方式遍历子节点。

Answer 2

我通常反对将jQuery用于这样的简单工作，但我可以在这里看到它的价值。尽管如此，如果您更喜欢非jQuery解决方案，它将具有不使用库的好处，不会引入虚假的ID或类并且运行速度更快，这里有一个：

<script type="text/javascript">

function selectOptGroupOptions(optGroup, selected) {
    var options = optGroup.getElementsByTagName("option");
    for (var i = 0, len = options.length; i < len; i++) {
        options[i].selected = selected;
    }
}

function selectOptGroup(selectId, label, selected) {
    var selectElement = document.getElementById(selectId);
    var optGroups = selectElement.getElementsByTagName("optgroup");
    var i, len, optGroup;
    for (i = 0, len = optGroups.length; i < len; i++) {
        optGroup = optGroups[i];
        if (optGroup.label === label) {
            selectOptGroupOptions(optGroup, selected);
            return;
        }
    }
}

</select>

<select id="veg" multiple>
    <optgroup label="roots">
        <option>Swede</option>
        <option>Carrot</option>
        <option>Turnip</option>
    </optgroup>
    <optgroup label="leaves">
        <option>Spinach</option>
        <option>Kale</option>
    </optgroup>
</select>

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots">

如果您的<optgroup>有ID，则可以取消selectOptGroup功能，只需将optgroup直接传递到selectOptGroupOptions。

Answer 3

jquery的：

$('#myoptgroup option').attr('selected', true);

Answer 4

我刚才尝试做类似的事情。

我想在点击群组标签时选择<optgroup>的{{1}}。第一次尝试是这样的：

<option>

这个解决方案一半有效......

单击$('select > optgroup').click(function () { $(this).children().attr('selected', true); });的标签后，其所有子项都被选中。

但只需点击<optgroup>，它仍然会选择群组中的所有其他<option>！问题在于事件冒泡，因为<option>在<option>内部，技术上也是点击它。

因此，最后一个难题是在实际点击<optgroup>的情况下抑制事件向上冒泡。最终的解决方案变成了：

<option>

完成工作！

修改

令人愤怒的是，这在IE8中无法正常工作（并且可疑＆lt; IE8 - 也许是IE9？）...

它决定完全忽略两者和元素上的点击事件。我能想到的唯一选择是将元素放在optgroup标签上方以捕获点击，但它可能不值得努力......

在选择框中快速选择整个optgroup的简便方法

4 个答案: