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"  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> </td>    <td> </td>  </tr>  <tr>      <td id="node" style="text-align:center"><p><span>节点名称  </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>设备名称  </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>地市名称  </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> </td>    <td id="citydevicenode" style="text-align:center;display: none;"><span>设备名称  </span>   <select id="citydevicename" name="citydevicename" style="width:210px;" > <option value="0" >请选择设备名称</option>   </select> </td></tr>    <tr>    <td> </td>    <td> </td>    <td><p class="search_bnt"><input  type="submit" class="inp_bnt" value="执 行" /></p></td>  </tr>  <tr><td> </td></tr>   </table>  </fieldset> </form>