简单的方法来快速选择在选择框中的全OPTGROUP(Easy way to quick select

2019-07-19 11:15发布

我有一个选择框中,我可以选择多个选项。 在选择框多个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和儿童。 你可以监听器连接到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><option>当点击该集团的label的。 第一次尝试是这样的:

$('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中工作的工作(和怀疑<IE8 - 也许IE9)...

它决定完全忽视点击都和元素的事件。 我能想到的唯一的选择是定位高于OPTGROUP标签元素捕捉点击,但它可能不值得...



文章来源: Easy way to quick select a whole optgroup in select box