js实现三级联动效果（简单易懂）
话不多说，请看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="one">
<option>请输入省份</option>
</select>
<select id="two">
<option>请输入市</option>
</select>
<select id="three">
<option>请输入区</option>
</select>
<script type="text/javascript">
var oone=document.getElementById("one");
var otwo=document.getElementById("two");
var three=document.getElementById("three");
var str='';
otwo.disabled=true;
three.disabled=true;
var arr1=[{"id":"1","value":"北京"},{"id":"2","value":"上海"},{"id":"3","value":"重庆"},{"id":"4","value":"天津"},{"id":"5","value":"山东"}];
for(var i=0;i<arr1.length;i++){
str+="<option value="+arr1[i].id+">"+arr1[i].value+"</option>"
}
oone.innerHTML=str;
var arr2 = {
'1':['101@北京'],
'2':['201@上海'],
'3':['301@重庆'],
'4':['401@天津'],
'5':['501@济南','502@青岛'] };
oone.onchange=function(){
var val=this.value;
var arrA = arr2[val];
var str1='<option>请输入市</option>';
for(var j=0;j<arrA.length;j++){
var aaa=arrA[j].split('@');
str1+="<option value="+aaa[0]+">"+aaa[1]+"</option>"
}
otwo.innerHTML=str1;
otwo.disabled=false;
three.innerHTML='<option>请输入区</option>';
three.disabled='disabled';
}
var arr3 = {
'101':['朝阳区','昌平区'],
'201':['宝山区','浦东区'],
'301':['不知道'],
'401':['真的不知道'],
'501':['市中区','历下区','槐荫区'],
'502':['市南区','市北区','崂山区'] };
otwo.onchange = function(){
var val=this.value;
console.log( this.value);
var str2='<option>请输入区</option>';
console.log(val)
for(var l=0;l<arr3[val].length;l++){
str2+="<option >"+arr3[val][l]+"</option>"
}
three.innerHTML=str2;
three.disabled=false;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍js实现简单的联动菜单效果，包括了js实现简单的联动菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下： 这是一个最简单的js联动菜单代码，在DW里可以自动生成，不想在DW里生成的话，把此份代码拷贝下拉修改也可以。网页上常用到一种Select联动菜单。 运行效果截图如下： 在线演示地址如下： http://dem
-
本文向大家介绍JS简单实现多级Select联动菜单效果代码，包括了JS简单实现多级Select联动菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下： JS联动菜单，简单代码实现JS多级Select联动菜单，也就是大家常用的一款菜单，Select联动状态的菜单，网页上经常见到的效果，希望大家能用得上。 运
-
本文向大家介绍JS实现简单抖动效果，包括了JS实现简单抖动效果的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴代码了，具体代码如下所示： 好了，代码到此结束，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍jquery+ajax实现省市区三级联动效果简单示例，包括了jquery+ajax实现省市区三级联动效果简单示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考，具体如下： 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了
-
本文向大家介绍JS制作简单的三级联动，包括了JS制作简单的三级联动的使用技巧和注意事项，需要的朋友参考一下 用javascript制作的一个简单三级联动，非常简单实用 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍JS+CSS实现简易实用的滑动门菜单效果，包括了JS+CSS实现简易实用的滑动门菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下： 这是一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究JS的达人一同切磋，
-
本文向大家介绍android-wheel控件实现三级联动效果，包括了android-wheel控件实现三级联动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了android wheel省市县三级联动效果，供大家参考，具体内容如下 在github上面有一个叫做 Android-wheel 的开源控件, 代码地址：https://github.com/maarek/android-w
-
本文向大家介绍简单实现js无缝滚动效果，包括了简单实现js无缝滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js无缝滚动效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。