<html >
<head>
<title>三级关联菜单(美工版)</title>
</head>
<body>
<select name="sel1" id="sel1" target='sel2' data='sel3' event='true'>
<!-- target 表示下级菜单显示的select的ID名称 -->
<!-- data 表示下级菜单显示的数据select的ID名称-->
<!-- event 表示是不是还有下级菜单-->
<!-- 原理 下级菜单的optgroup的label的文字和选择的文字对应,然后显示出来-->
<!-- 如果你要制作２级菜单 需要 三个select 二个是显示 还有一个是存放显示的数据-->
<!-- 本例中 显示三级菜单 需要 七个select 四个是显示 三个是数据-->
<!-- 记得把后面的脚本放在网页中,注意：不要放在<head></head>中就行-->
<!-- 如果你有不明白地方 加我QQ:628558或MSN:shqlsl@hotmail.com 时间:2006年9月16日上午-->
<option value="浙江省" selected="selected">浙江省</option>
<option value="福建省">福建省</option>
</select>
<select name="sel2" id="sel2" target='sel4' data='sel5' event='true'>
<option value="" selected="selected">请选择</option>
</select>
<select name="sel3" id="sel3">
<optgroup label="浙江省">
<option value="杭州" selected="selected">杭州</option>
<option value="温州">温州</option>
<option value="台州">台州</option>
<option value="宁波">宁波</option>
</optgroup>
<optgroup label="福建省">
<option value="福州">福州</option>
<option value="泉州">泉州</option>
<option value="漳州">漳州</option>
</optgroup>
</select>
<select name="sel4" id="sel4" target='sel6' data='sel7'>
<option value="" selected="selected">请选择</option>
</select>
<select name="sel5" id="sel5">
<optgroup label="杭州">
<option value="下城区" selected="selected">下城区</option>
<option value="上城区">上城区</option>
<option value="江干区">江干区</option>
</optgroup>
<optgroup label="温州">
<option value="鹿城区">鹿城区</option>
<option value="龙湾区">龙湾区</option>
<option value="泉州">泉州</option>
<option value="漳州">漳州</option>
</optgroup>
<optgroup label="福州">
<option value="鼓楼区">鼓楼区</option>
<option value="台江区">台江区</option>
<option value="仓山区">仓山区 </option>
<option value="晋安区">马尾区</option>
</optgroup>
<optgroup label="泉州">
<option value="晋江">晋江</option>
<option value="石狮">石狮</option>
<option value="永春">永春</option>
</optgroup>
</select>
<select name="sel6" id="sel6" >
<option value="" selected="selected">请选择</option>
</select>
<select name="sel7" id="sel7">
<optgroup label="下城区">
<option value="体育场路" selected="selected">体育场路</option>
<option value="朝晖路">朝晖路</option>
<option value="建国北路">建国北路</option>
</optgroup>
<optgroup label="上城区">
<option value="吴山广场">吴山广场</option>
<option value="平海路">平海路</option>
<option value="清泰路">清泰路</option>
</optgroup>
<optgroup label="石狮">
<option value="宝盖镇">宝盖镇</option>
<option value="灵秀镇">灵秀镇</option>
<option value="锦尚镇">锦尚镇</option>
</optgroup>
</select>
<script type="text/javascript">
var shqlsl={};
shqlsl.$=function(o){return typeof(o)=="string"?document.getElementById(o)
;}
shqlsl.isIE=document.all;
if(!shqlsl.isIE)
HTMLElement.prototype.attachEvent=function(type,foo){this.addEventListener(type.slice(2),foo,false)}
shqlsl.$opt=function(o,t){var opts=o.getElementsByTagName('optgroup');for(var i=0;i<opts.length;i++){if(opts
.label==t)return opts;}}
shqlsl.hidsel=function(){var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++){var d=sel.getAttribute('data');if(d!=null){shqlsl.$(d).style.display='none';}}};
if(shqlsl.isIE)
window.attachEvent("onload",shqlsl.hidsel);
else
window.addEventListener("load",shqlsl.hidsel,false);
function t(ev)
{
var ev=ev||window.event.srcElement;
var ss=shqlsl.$(ev.getAttribute('target'));/*选择以后会显示给的对象*/
var s=shqlsl.$(ev.getAttribute('data'));/*隐藏的子菜单*/
var stxt=ev.options[ev.selectedIndex].text;/*选择第几项*/
if(ev.getAttribute('event')=='true')
ss.attachEvent("onchange",function(){if(shqlsl.isIE){t()}else{t(this)}})
ss.innerHTML="";
try{
var o=shqlsl.$opt(s,stxt).cloneNode(true);
ss.appendChild(o);
}catch(e){}
}
</script>
</body>
</html>
论坛设施
