6

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

4

4 回答 4

4

我建议使用 jQuery（或其他框架）来快速处理 DOM 选择。给每个 optgroup 一个类，以便更容易抓住它。

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

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

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

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

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

于 2009-09-24T20:32:03.617 回答
4

我通常反对将 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.

于 2009-09-25T09:13:34.897 回答
2

jQuery：

$('#myoptgroup option').attr('selected', true);
于 2009-09-24T20:26:41.320 回答
2

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

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

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

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

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

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

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

$('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 中不起作用（并且怀疑 < IE8 - 也许是 IE9？）...

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

于 2010-10-05T03:32:32.243 回答