javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 网站技术 > 标签html

html标签optgroup select用法教程

来源:IT技术网编辑:雨天发布于:2017-01-22人围观

html select标签中optgroup选项的用法,select使用optgroup标签对option进行分类,不了解的朋友参考下。
 
 
 

有时需要对html select中元素进行分类,optgroup选项可以对数据进行分类。

在使用javascript添加optgroup时,在ie与firefox下分别出现了不同的bug,应该怎么解决?

代码:
 

代码示例:
window.onload = function () {
var selObj = document.getElementById('demo');
var optionGroupObj = document.createElement('optgroup');
optionGroupObj.label = 'optionGroup';
selObj.appendChild(optionGroupObj);
var optionObj = new Option('optionText','optionValue');
selObj.options[selObj.options.length] = optionObj;
}
<select id="demo">
<option value="-1">please select</option>
</select>

IE下显示结构为:
 

代码示例:
<SELECT id=demo>
<OPTION value=-1 selected>please select</OPTION>
<OPTGROUP label=optionGroup>
<OPTION value=optionValue>optionText</OPTION>
</OPTGROUP>
</SELECT>

在Firefox下显示结构为:
 

代码示例:
<select id="demo">
<option value="-1">please select</option>
<optgroup label="optionGroup"/>
<option value="optionValue">optionText</option>
</select>

在IE下,把optgroup作为option父结点,这是正确的。
而Firefox却把optgroup作为option的兄弟结点,这显然不是我们所要的结果。

用标准DOM的操作方式进行改写。
将第7行代码改成“optionGroupObj.appendChild(optionObj);”

在IE下显示结构是:
 

代码示例:
<SELECT id=demo>
<OPTION value=-1 selected>please select</OPTION>
<OPTGROUP label=optionGroup>
<OPTION value=optionValue></OPTION>
</OPTGROUP>
</SELECT>
 

Firefox正常了。
但在IE下,在option元素却没有’optionText’显示文本。

完整代码(成功解决以上问题):
 

复制代码代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>optgroup Bug</title>
<script type="text/javascript">
window.onload = function (){
var selObj = document.getElementById('demo');
var optionGroupObj = document.createElement('optgroup');
optionGroupObj.label = 'optionGroup';
selObj.appendChild(optionGroupObj);
var optionObj = new Option();
optionObj.value = 'optionValue';
optionObj.innerHTML = 'optionText';
optionGroupObj.appendChild(optionObj);
}
</script>
</head>
<body>
<select id="demo">
<option value="-1">please select</option>
</select>
</body>
</html>
 

与相关的文章
有时间的话来看看IT界的突发事件