html – optgroup选择组标题

概述我想创建一个带有分组项目的下拉框.这是我正在使用的数据库查找 HTML表单.有没有办法可以选择组标题,从而选择该特定组中的所有项目？例如,如果团体标题是“德国汽车”并且有“梅赛德斯”和“奥迪”项目,点击“德国汽车”时,两家德国汽车公司都应该被选中. 如果您为选择组提供课程,则可以选择课程,然后访问其子课程. $('.german-cars').children(); 如果那不可用,替代方案有点慢. 我想创建一个带有分组项目的下拉框.这是我正在使用的数据库查找 HTML表单.有没有办法可以选择组标题,从而选择该特定组中的所有项目？例如,如果团体标题是“德国汽车”并且有“梅赛德斯”和“奥迪”项目,点击“德国汽车”时,两家德国汽车公司都应该被选中.解决方法 如果您为选择组提供课程,则可以选择课程,然后访问其子课程.

$('.german-cars').children();

如果那不可用,替代方案有点慢.当您遍历所有optgroup并单独比较它们的文本然后抓住那些孩子.

编辑：修复选择器.
并详细说明：

然后在点击时选择它们你会使用：

$('.german-cars').click(function(e) {    e.preventDefault();    $(this).children().attr('selected','selected');});

假设元素设置为多个选择.否则,只会选择列表中的最后一辆车.

编辑2

小提琴：http://jsfiddle.net/mbChZ/25/

这些变化应该以您正在寻找的方式运作.

$(function() {    $('select optgroup').mousedown(function(e) {        e.preventDefault();        if ($(this).children(':selected').length == $(this).children().length) {            $(this).children().attr('selected',null);        } else {            $(this).children().attr('selected','selected');        }    });    $('select option').mousedown(function(e) {       e.stopPropagation();       e.preventDefault();       $(this).attr('selected',($(this).is(':selected'))? null : 'selected');                        });});​

我已经将事件更改为mousedown,因此我们可以在浏览器处理了mousedown事件之前看到元素的状态.这允许我们检查它们是否全部被选中,如果是,则取消选择而不是选择.并且必须对选项的click事件执行相同 *** 作,以便它可以阻止在该事件上的传播.

我不是百分之百确定这个浏览器的兼容性,尽管如果你支持它们,你可能想确保它在旧的IE中工作.

总结

以上是内存溢出为你收集整理的html – optgroup选择组标题全部内容，希望文章能够帮你解决html – optgroup选择组标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。