js基础:Javascript实现自动无限级关联下拉菜单
|
admin
2010年8月18日 9:58
本文热度 3692
|
<html>
<head>
<title>级联下拉菜单</title>
<meta http-equiv = "Content-Type" counter = "text/html;charset = gb2312">
<script>...
var nMaxLength = 0;
function init(obj)
...{
var hasChild = false;
var nodes = document.getElementsByTagName('p');
var selectobj;
var pid = (obj==undefined) ? 0 : parseInt(obj.value);
var selectobj = document.createElement('select');
selectobj.setAttribute('name','select_' + nMaxLength);
selectobj.onchange = function()
...{
var sels = document.getElementsByTagName('select');
for(var j=sels.length-1;j>0;j--)
...{ if(sels[j]==this)
...{
break;
}
nMaxLength--;
document.getElementById('div1').removeChild(sels[j]);
}
init(this);
}
for(var i=0;i<nodes.length;i++)
...{
var thispid = parseInt(nodes[i].getAttribute('pid'));
var id = parseInt(nodes[i].getAttribute('id'));
var n = nodes[i].getAttribute('n');
if(thispid == pid)
...{
var opt = document.createElement('option');
opt.setAttribute('value',id);
opt.innerText = n;
selectobj.appendChild(opt);
hasChild = true;
}
; }
if(hasChild)
...{
nMaxLength++;
document.getElementById('div1').appendChild(selectobj);
init(selectobj);
}
}
function getMaxLength()
...{
document.forms[0].maxLength.value = nMaxLength;
return true;
}
</script>
</head>
<body onload = "init();">
<form action ="" method="post" onsubmit="return getMaxLength();">
<div id="div1">
<p n='product' id='0' pid='-1' /><p n='art' id='1' pid='0' /><p n='english' id='2' pid='0' /><p n='game' id='3' pid='0' />
<p n='math' id='4' pid='0' /><p n='natural' id='5' pid='0' /><p n='operate' id='6' pid='0' />
<p n='poem' id='7' pid='0' /><p n='science' id='8' pid='0' /><p n='high' id='11' pid='1' />
<p n='low' id='12' pid='1' /><p n='middle' id='13' pid='1' /><p n='abc' id='21' pid='2' />
<p n='number' id='22' pid='2' /><p n='song' id='23' pid='2' /><p n='story' id='24' pid='2' />
<p n='talk' id='25' pid='2' /><p n='listen' id='251' pid='25' />
<p n='read' id='252' pid='25' /><p n='word' id='253' pid='25' />
<p n='write' id='254' pid='25' /><p n='test' id='44' pid='1' /><p n='high' id='41' pid='4' />
</div>
<input type="hidden" name="maxLength" value="">
</form>
</body>
</html>
该文章在 2010/8/18 9:58:08 编辑过
400 186 1886
