HTML标签 optgroup 【select 使用】
学无止境!!!
今天在论坛回答帖子,学到了一招,select原来可以使用optgroup 标签,对option进行分类!
特意从网上摘录了下面的文章...
在 html里,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’显示文本。
最后,改写成如下代码,解决了这个Bug。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
相关文档:
HTML中使用input type="file"上传文件时,代码中只能得到文件的名称,而有些特殊的需要要求我们必须得到上传文件的绝对路径,为此我们采用Javascript实现得到文件的绝对路径。
具体如下。
页面代码(只粘贴了关键代码):
<form name="thisform" method="post"
action="<%=request.getContextPath()%>/movi ......
<html>
<script language="javascript" defer>
function isvalid()
{
Input_Str=document.getElementById("tsinput").value;
document.getElementById("ts").innerHTML=Input_Str;
if(Input_Str!=document.getElementById("ts").innerText)
alert("include Html Element... ......
1、大部分WEB文档采用HTML格式。
2、本例用如下HTML文档
<html>
<head>
<title>
Laptop power supplies are avaliable in First class only
  ......
HTML有10个表格相关标签。下面是一个带有简介的列表,但是首先,文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:
<caption> 定义表格标题(4, 5)
<col> 为表格的列定义属性(4, 5)
<colgroup> 定义表格列的分组(4, 5)
<table> 定义表格(4, 5)
<tbody> 定义表格主体(4, 5)
< ......