JS实现三级联动下拉框

<script type="text/javascript">
	 //定义了设备名称的二维数组，里面的顺序跟节点名称的顺序是相同的。通过selectedIndex获得节点名称的下标值来得到相应的设备名称数组
	var deviceName=[
		["xxx1","xxx2","xxx3","xxx4"],
		["yyy1","yyy2","yyy3","yyy4"]
	];
	//定义了地市名称对应的设备名称的二维数组，里面的顺序跟地市名称的顺序是相同的。通过selectedIndex获得地市名称的下标值来得到相应的设备名称数组
	var cityDeviceName=[
		["鼓楼","台江","仓山","晋安","马尾","闽侯","连江","罗源","闽清","永泰","平潭","福清","长乐"],
		["思明","海沧","湖里","集美","同安","翔安"],
		["蕉城","福鼎","福安","霞浦","柘荣","寿宁","周宁","屏南","古田"],
		["城厢","涵江","荔城","秀屿","仙游"],
		["鲤城","丰泽","洛江","泉港","惠安","安溪","永春","德化","石狮","晋江","南安"],
		["云霄","漳浦","诏安","长泰","东山","南靖","平和","龙海","芗城","龙文"],
		["新罗","长汀","永定","上杭","武平","连城","漳平"],
		["梅列","三元","明溪","清流","宁化","大田","尤溪","沙县","将乐","泰宁","建宁","永安"],
		["延平","光泽","邵武","顺昌","武夷山","建阳","建瓯","浦城","松溪","政和"]
	];
	function getDeviceName(){
    	var nodename=document.getElementById("nodename");
      var devicename=document.getElementById("devicename");

			if(document.getElementById("nodename").value=="地市"){
				document.getElementById("citynode").style.display="";//显示 
				document.getElementById("citydevicenode").style.display="";//显示 
				document.getElementById("devicenode").style.display="none";//隐藏 
			} else {
				document.getElementById("citynode").style.display="none";
				document.getElementById("citydevicenode").style.display="none";
				document.getElementById("devicenode").style.display="";
	
				var nodeDeviceName=deviceName[nodename.selectedIndex-1];// 获取节点对应的设备名称
				devicename.length=1;// 清空设备名称下拉框,保留一个提示
	
				for(var i=0;i<nodeDeviceName.length;i++){// 将数组中的值填充到下拉框中
					devicename[i+1]=new Option(nodeDeviceName[i],nodeDeviceName[i]);
				}
			}     
     }
	function getCityDeviceName(){
    	var cityname=document.getElementById("cityname");
      var citydevicename=document.getElementById("citydevicename");
			var cityDevice=cityDeviceName[cityname.selectedIndex-1];
	
			citydevicename.length=1;
	
			for(var i=0;i<cityDevice.length;i++){
				citydevicename[i+1]=new Option(cityDevice[i],cityDevice[i]);
			}    
    }
	 function checkForm(){
		var nodename=document.getElementById("nodename").value;
		var devicename=document.getElementById("devicename").value;
		var citydevicename=document.getElementById("citydevicename").value;

		if(nodename=='地市' && citydevicename=='0'){
			alert("请选择设备名称...");
			return false;
		} else if(nodename!='地市' && devicename=='0') {
			alert("请选择设备名称...");
			return false;
		}

		var remark = document.getElementById("remark");
		var obj = document.getElementById("devicename") || document.getElementById("citydevicename");
		remark.value = obj.options[obj.selectedIndex].value;//取下拉框中的内容赋值给隐藏域

		return true;
	 }
</script>

 

 

<form action="performanceMonitor.do" method="post" onSubmit="return checkForm();" target="_blank">
  <input type="hidden" id="remark" name="remark" />
  <fieldset style="border-color:#999999">
  	<legend><div id="divname" style="font-size:14px; size:auto ; color:#09F"">三级联动</div></legend>
  	<table width="100%"  align="center" >
  	<tr>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
  	</tr>
  	<tr>
      <td id="node" style="text-align:center"><p><span>节点名称&nbsp;&nbsp;</span>
     	<select id="nodename" name="nodename" style="width:210px" onchange="getDeviceName()" >
	     <option value="0" >请选择节点名称</option>
		 	 <option value="横向" >横向</option>
	     <option value="纵向" >纵向</option>
	     <option value="地市" >地市</option>
     	</select>
      </td>
      <td id="devicenode" style="text-align:center;"><span>设备名称&nbsp;&nbsp;</span>
       <select id="devicename" name="devicename" style="width:210px;" >
	     <option value="0" >请选择设备名称</option>
       </select>
      </td>
	  <td id="citynode" style="text-align:center;display: none;"><span>地市名称&nbsp;&nbsp;</span>
       <select id="cityname" name="cityname" style="width:210px;" onchange="getCityDeviceName()">
		 <option value="0" >请选择地市名称</option>
	     <option value="福州" >福州</option>
	     <option value="厦门" >厦门</option>
	     <option value="宁德" >宁德</option>
	     <option value="莆田" >莆田</option>
	     <option value="泉州" >泉州</option>
	     <option value="漳州" >漳州</option>
	     <option value="龙岩" >龙岩</option>
	     <option value="三明" >三明</option>
	     <option value="南平" >南平</option>
       </select>
      </td>
    </tr>
	<tr>
		<td>&nbsp;</td>
    	<td id="citydevicenode" style="text-align:center;display: none;"><span>设备名称&nbsp;&nbsp;</span>
		   <select id="citydevicename" name="citydevicename" style="width:210px;" >
			 <option value="0" >请选择设备名称</option>
		   </select>
		 </td>
	</tr>
    <tr>
    	<td>&nbsp;</td>
    	<td>&nbsp;</td>
    	<td><p class="search_bnt"><input  type="submit" class="inp_bnt" value="执 行" /></p></td>
  	</tr>
  	<tr><td>&nbsp;</td></tr>
   </table>
  </fieldset>
 </form>