列表框的问题??? ??? 可以啊,你onchange判断一下就可以了,但问题是你开始的时候默认就已经是选上“大分类a”了,你怎么处理? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 使用 HTML 标签 optgroup 即可!L@_@K <select name="select" id="select"> <optgroup LABEL="大分类a"> <option value="1">小分类1 </option> <option value="2">小分类2 </option> <option value="3">小分类3 </option> <option value="4">小分类4 </option> <option value="5">小分类5 </option> </optgroup> <optgroup LABEL="大分类b"> <option value="6">小分类6 </option> <option value="7">小分类7 </option> <option value="8">小分类8 </option> <option value="9">小分类9 </option> <option value="10">小分类10 </option> </optgroup> </select> 建议,拆分成2个select,选中大类后后面的小类select动态添加, http://www.cnblogs.com/Qizai/archive/2007/08/07/846857.html 改良一下,加个提示项,value 为空字符串。L@_@K <select name="selCategory" id="selCategory"> <option value=""><-- 请选择分类 --></option> <optgroup LABEL="大分类a"> <option value="1">小分类1 </option> <option value="2">小分类2 </option> <option value="3">小分类3 </option> <option value="4">小分类4 </option> <option value="5">小分类5 </option> </optgroup> <optgroup LABEL="大分类b"> <option value="6">小分类6 </option> <option value="7">小分类7 </option> <option value="8">小分类8 </option> <option value="9">小分类9 </option> <option value="10">小分类10 </option> </optgroup> </select> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function RemoveMe(){ document.getElementById("select").options[0].parentNode.removeChild(document.getElementById("select").options[0]); document.getElementById("select").options[5].parentNode.removeChild(document.getElementById("select").options[5]); } //--> </SCRIPT></head><body onload="RemoveMe();"><select name="select" id="select"> <option>大分类a </option> <option value="1">小分类1 </option> <option value="2">小分类2 </option> <option value="3">小分类3 </option> <option value="4">小分类4 </option> <option value="5">小分类5 </option> <option>大分类b </option> <option value="6">小分类6 </option> <option value="7">小分类7 </option> <option value="8">小分类8 </option> <option value="9">小分类9 </option> <option value="10">小分类10 </option> </select></body></html> 有个缺陷,optgroup不能嵌套,要是能形成一个树形就漂亮了 仅凭 HTML 办不到,HTML + JS 就没问题了,一会儿写个放上来。 浏览器会自动将全部 optgroup 连接到 select 下面,所以即使按嵌套格式写了也不行(除了代码看起来好看),除非自己分析 select 的 innerHTML 结构,不过那样就太烦人。所以,为了简便起见,手动给 optgroup 添加了 level 属性,遍历时根据 level 值在前面加上全角空格即可缩进了!L@_@K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>dhtml.select.simulateMultipleHierarchy.html</title> <meta name="generator" content="editplus" /> <meta name="author" content="[email protected]" /> <meta name="keywords" content="dhtml js csdn" /> <meta name="description" content="for csdn.net" /> </head> <body> <select name="selCategory" id="selCategory"> <option value=""><-- 请选择分类 --></option> <optgroup LABEL="特大分类 I" level="0"> <option value="0">大分类a </option> <optgroup LABEL="大分类b" level="1"> <option value="1">小分类1</option> <option value="2">小分类2</option> <option value="3">小分类3</option> <option value="4">小分类4</option> <option value="5">小分类5</option> <optgroup LABEL="小分类6" level="2"> <option value="1">特小分类1</option> <option value="2">特小分类2</option> <option value="3">特小分类3</option> <optgroup LABEL="特小分类6" level="3"> <option value="1">更小分类1</option> <option value="2">更小分类2</option> </optgroup> </optgroup> </optgroup> <optgroup LABEL="特大分类 II" level="0"> <option value="6">大分类c</option> <option value="7">大分类d</option> <option value="8">大分类e</option> <option value="9">大分类f</option> <option value="10">大分类g</option> </optgroup> </select> </body> <script type="text/javascript"> <!--var blankBlock = " ";var prefixFilling;var collSel = document.getElementsByTagName("select");var oSel;var collOptGrp;var oOptGrp;var iLevel;for (var i=0; i<collSel.length; i++){ oSel = collSel[i]; collOptGrp = oSel.getElementsByTagName("optgroup"); for (var j=0; j<collOptGrp.length; j++) { oOptGrp = collOptGrp[j]; oParent = oOptGrp.parentNode; // NOTE: level 属性是手动加上去的。 iLevel = parseInt(oOptGrp.level); if (iLevel > 0) { prefixFilling = ""; for (var k=0; k<iLevel; k++) { prefixFilling += blankBlock; } oOptGrp.label = prefixFilling + oOptGrp.label; for (var k=0; k<oOptGrp.childNodes.length; k++) { if (oOptGrp.childNodes[k].nodeType == 1) oOptGrp.childNodes[k].text = prefixFilling + oOptGrp.childNodes[k].text; } } }} //--> </script></html> javascript this的问题 jQuery真的很mini吗 学习javascript 简单frame框架伸缩问题 easyui draggable input 不能响应鼠标事件 如何在一个iframe中显示一个有样式的文本内容? 我想在子窗口关闭的时候仅修改父窗口中的一个数值 怎么做? 救教一个弹出”等待页面“的方法(给个思路也好)? 升级了,庆贺一下!散分 关于HISTORY的问题 火狐ff中遍历某一个form下面所有的input控件,如何写这个js ? 怎么输入多个手机号
L@_@K
<select name="select" id="select">
<optgroup LABEL="大分类a">
<option value="1">小分类1 </option>
<option value="2">小分类2 </option>
<option value="3">小分类3 </option>
<option value="4">小分类4 </option>
<option value="5">小分类5 </option>
</optgroup>
<optgroup LABEL="大分类b">
<option value="6">小分类6 </option>
<option value="7">小分类7 </option>
<option value="8">小分类8 </option>
<option value="9">小分类9 </option>
<option value="10">小分类10 </option>
</optgroup>
</select>
L@_@K
<select name="selCategory" id="selCategory">
<option value=""><-- 请选择分类 --></option>
<optgroup LABEL="大分类a">
<option value="1">小分类1 </option>
<option value="2">小分类2 </option>
<option value="3">小分类3 </option>
<option value="4">小分类4 </option>
<option value="5">小分类5 </option>
</optgroup>
<optgroup LABEL="大分类b">
<option value="6">小分类6 </option>
<option value="7">小分类7 </option>
<option value="8">小分类8 </option>
<option value="9">小分类9 </option>
<option value="10">小分类10 </option>
</optgroup>
</select>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function RemoveMe(){
document.getElementById("select").options[0].parentNode.removeChild(document.getElementById("select").options[0]);
document.getElementById("select").options[5].parentNode.removeChild(document.getElementById("select").options[5]);
}
//-->
</SCRIPT>
</head><body onload="RemoveMe();">
<select name="select" id="select">
<option>大分类a </option>
<option value="1">小分类1 </option>
<option value="2">小分类2 </option>
<option value="3">小分类3 </option>
<option value="4">小分类4 </option>
<option value="5">小分类5 </option>
<option>大分类b </option>
<option value="6">小分类6 </option>
<option value="7">小分类7 </option>
<option value="8">小分类8 </option>
<option value="9">小分类9 </option>
<option value="10">小分类10 </option>
</select>
</body>
</html>
除非自己分析 select 的 innerHTML 结构,不过那样就太烦人。
所以,为了简便起见,手动给 optgroup 添加了 level 属性,
遍历时根据 level 值在前面加上全角空格即可缩进了!L@_@K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dhtml.select.simulateMultipleHierarchy.html</title>
<meta name="generator" content="editplus" />
<meta name="author" content="[email protected]" />
<meta name="keywords" content="dhtml js csdn" />
<meta name="description" content="for csdn.net" />
</head> <body>
<select name="selCategory" id="selCategory">
<option value=""><-- 请选择分类 --></option>
<optgroup LABEL="特大分类 I" level="0">
<option value="0">大分类a </option>
<optgroup LABEL="大分类b" level="1">
<option value="1">小分类1</option>
<option value="2">小分类2</option>
<option value="3">小分类3</option>
<option value="4">小分类4</option>
<option value="5">小分类5</option>
<optgroup LABEL="小分类6" level="2">
<option value="1">特小分类1</option>
<option value="2">特小分类2</option>
<option value="3">特小分类3</option>
<optgroup LABEL="特小分类6" level="3">
<option value="1">更小分类1</option>
<option value="2">更小分类2</option>
</optgroup>
</optgroup>
</optgroup>
<optgroup LABEL="特大分类 II" level="0">
<option value="6">大分类c</option>
<option value="7">大分类d</option>
<option value="8">大分类e</option>
<option value="9">大分类f</option>
<option value="10">大分类g</option>
</optgroup>
</select>
</body>
<script type="text/javascript">
<!--
var blankBlock = " ";
var prefixFilling;
var collSel = document.getElementsByTagName("select");
var oSel;
var collOptGrp;
var oOptGrp;
var iLevel;
for (var i=0; i<collSel.length; i++)
{
oSel = collSel[i];
collOptGrp = oSel.getElementsByTagName("optgroup"); for (var j=0; j<collOptGrp.length; j++)
{
oOptGrp = collOptGrp[j];
oParent = oOptGrp.parentNode;
// NOTE: level 属性是手动加上去的。
iLevel = parseInt(oOptGrp.level);
if (iLevel > 0)
{
prefixFilling = "";
for (var k=0; k<iLevel; k++)
{
prefixFilling += blankBlock;
} oOptGrp.label = prefixFilling + oOptGrp.label; for (var k=0; k<oOptGrp.childNodes.length; k++)
{
if (oOptGrp.childNodes[k].nodeType == 1)
oOptGrp.childNodes[k].text = prefixFilling + oOptGrp.childNodes[k].text;
}
}
}
}
//-->
</script>
</html>