<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多级联动菜单</title>
<script type="text/javascript">
var xmlHttp;
var targetSelId;
var selArray;
function createXmlHttp(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function buildSelect(selectedId,targetId){
if(selectedId==""){
clearSubSel(targetId);
return;
}
targetSelId=targetId;
createXmlHttp();
xmlHttp.onreadystatechange=buildSelectCallBack;
xmlHttp.open("GET","select_menu.jsp?selectedId="+selectedId,true);
xmlHttp.send(null);
}
function buildSelectCallBack(){
if(xmlHttp.readyState==4){
var optionsInfo=eval("("+xmlHttp.responseText+")");
var targetSelNode=document.getElementById(targetSelId);
clearSubSel(targetSelId);
for(var i in optionsInfo){
targetSelNode.appendChild(createOption(i,optionsInfo[i]));
}
}
}
function createOption(value,text){
var opt=document.createElement("option");
opt.setAttribute("value",value);
opt.appendChild(document.createTextNode(text));
return opt;
}
function clearOptions(selNode){
selNode.length=1;
selNode.options[0].selected=true;
}
function initSelArray(){
selArray=arguments;
}
function clearSubSel(targetId){
var canClear=false;
for(var i=0;i<selArray.length;i++){
if(selArray[i]==targetId){
canClear=true;
}
if(canClear){
clearOptions(document.getElementById(selArray[i]));
}
}
}
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: large}
-->
</style>
</head>
<body onLoad="initSelArray('selA','selB','selC');buildSelect('INIT','selA')">
<span class="STYLE1">多极联动菜单</span>
<table width="363" border="1">
<tr>
<td width="149"><div align="right">列表A</div></td>
<td width="198"><label>
<select name="selA"id="selA" onChange="buildSelect(this.value,'selB')" style="width:120">
<option value="" selected="selected">---请选择--- </option>
</select>
</label></td>
</tr>
<tr>
<td><div align="right">列表B</div></td>
<td><select name="selB" id="selB" onChange="buildSelect(this.value,'selC')" style="width:120">
<option value="" selected="selected">---请选择---</option>
</select></td>
</tr>
<tr>
<td><div align="right">列表C</div></td>
<td><select name="selC" id="selC" style="width:120">
<option value="" selected="selected">---请选择---</option>
</select></td>
</tr>
</table>
</body>
</html>
ajax联动菜单ajaxa联动菜单，ajaxa联动菜
4星 · 超过85%的资源 需积分: 9 141 浏览量
2007-12-10
14:04:18
上传
评论
收藏 4KB RAR 举报 
Test1_4.war.rar （5个子文件） 
Test1_4.war WEB-INF 
web.xml 284B lib classes ajax db DbCon.class 2KB META-INF MANIFEST.MF 39B select_menu.jsp 2KB
select_menu.html 3KB资源评论
wyuxiao7292013-01-25我上次下载后还没有评价呢。。不错很好用。
softwarestudying2012-07-07不错，不过有点小bug
kyo852012-02-15不错，不过有bug，如果选择后重新选择，之前的数据会保留
