在选择框中快速选择整个 optgroup 的简单方法答案

【问题标题】：Easy way to quick select a whole optgroup in select box在选择框中快速选择整个 optgroup 的简单方法
【发布时间】：2011-12-07 12:36:05
【问题描述】：

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

【问题讨论】：

标签： javascript html optgroup

【解决方案1】：

我建议使用 jQuery（或其他框架）来快速处理 DOM 选择。为每个 optgroup 分配一个类，以便于获取它。

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

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

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

**这两个示例都是未经测试的伪代码，但如有必要，它们应该只需要进行最少的更改。

如果您不能使用框架，则必须自己遍历 DOM 才能找到 optgroup 和子项。您可以将侦听器附加到 select 元素以获取被选中的元素，然后也可以通过这种方式遍历子元素。

【讨论】：

嗯，我试图找到一个没有 jQuery 的解决方案。但是看看简单的方法；另一边：遍历 dom.... Jquery 就是这样。
@blub — 我想很多人都是这样进入 jQuery 的。 ;-)
自己遍历 DOM 并不是很困难，但框架只是让它变得更容易。 document.getElementById('selectElementID') 会给你选择元素本身。然后它只是遍历它的孩子的问题，或者您可以添加一个事件侦听器来捕获选择事件并解析它是否是您想要的 optgroup。如果是这样，那么您将遍历 optgroup 子级并选择它们。
提示，在最近的 jQuery 版本中，在这种情况下，您应该使用 .prop() 而不是 .attr()。

【解决方案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。

【讨论】：

【解决方案3】：

jquery:

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

【讨论】：

【解决方案4】：

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

我想在单击组标签时选择<optgroup> 的<option>s。第一次尝试是这样的：

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

这个解决方案成功了一半......

单击<optgroup> 的标签后，其所有子项都被选中。

但是当简单地点击<option> 时，它仍然选择了组中的所有其他<option>s！问题是事件冒泡，因为<option> 在<optgroup> 内，从技术上讲，您也在点击它。

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

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

$('select > optgroup > option').click(function (e) {
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
});

任务完成！

编辑

令人生气的是，这在 IE8 中不起作用（并且值得怀疑

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

【讨论】：