<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> </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>
分享到:
相关推荐
互相关联的三级下拉框代码,使用js代码制作,编辑菜单只需要修改数组内容即可,代码和html分开
纯JS实现地区选择三级联动下拉框
这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框这里是基于layui开发的省市区三级联动下拉框
给初学的朋友写的ajaxPro写的一个例子,实现三级联动下拉框+返回服务器时间,有一个用回调函数。另一个直接在JS调服务器方法,带传参数的 QQ4066441
JS年月日三级联动下拉框日期选择代码
JS年月日三级联动下拉框日期选择代码,默认当前日期,代码附带详细中文注释,供大家参考。
三级联动下拉框 word版本的
主要介绍了javascript实现省市区三级联动下拉框菜单很详细的代码,解决了大家实现javascript省市区三级联动下拉框菜单的问题,感兴趣的小伙伴们可以参考一下
实现效果: jQuery实现select省市区三级联动下拉框,通过选择省,市区的值随之变化,非常适用于企业网站或者商城网站,用户在注册的时候填写的信息。php中文网推荐下载!
jQuery省市区三级联动下拉框基于jquery-1.8.2.min.js制作,三级联动代码。
JS+XML 省市区 三级联动下拉框 可以学到很多东西的 (*^__^*) 嘻嘻……
最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...
JS实现的年月日三级联动下拉框日期选择效果源码.zip
jQuery全国高校三级联动下拉框基于jquery.1.10.2.min.js,省份、城市、学校三级联动,数据为2016年全国高校数据统计。
三级联动下拉框, 也可以扩展为N级联动, 自动判别 label, value, 速度快,项目中肯定用得到
全国省市区地址下拉框二级、三级联动选择html例子,JS本地实现,无需网络就能使用,数据为国家省市区6位标准编码,二级联动为省、市的下拉框选择,三级联动为省、市、区的下拉框选择,效果请打开压缩包中的html页面...
中国的省市县三级联动下拉框html+js源码,看懂后也可以扩展成四级五级联动