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

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

2009-09-24 blub

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

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

如果您想选择基于用户选择的组整组，请执行下列操作：

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

**两个例子是未经测试的伪代码，但它们应该以最小的努力必要时进行更改。

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

来源

2009-09-24 20:32:03

嗯，我试图找到没有jQuery的解决方案。但看着简单的方法来做到这一点;和另一边：遍历DOM .... Jquery它。 – blub 2009-09-24 20:46:06

@blub - 我想很多人都以这种方式进入jQuery。 ;-) – 2009-09-24 20:48:32

自己遍历DOM并不是非常困难，但框架只是让它更容易。 'document.getElementById（'selectElementID'）'会给你选择元素本身。然后，它只是遍历其子元素的问题，或者您可以添加事件侦听器来捕获select事件，并解析它是否是您想要的optgroup。如果是这样，那么你会遍历optgroup儿童并选择它们。 – 2009-09-24 20:52:00

的jQuery：

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

来源

2009-09-24 20:26:41 Anatoliy

我通常反对像这样简单的工作使用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-25 09:13:34

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

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

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

该解决方案一半的工作...

在点击<optgroup>的标签所有的孩子成了选择。

但是当只需点击一个<option>它仍然选择组中的所有其他<option>！问题在于事件冒泡，因为<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标签上方以捕获点击，但其可能不值得这种努力...

来源

2010-10-05 03:32:32

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

回答

相关问题