js加MySQL三级联动_js实现三级联动效果（简单易懂）

请输入省份

请输入市

请输入区

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

str+=""+arr1[i].value+""

}

oone.innerHTML=str;

var arr2 = {

'1':['101@北京'],

'2':['201@上海'],

'3':['301@重庆'],

'4':['401@天津'],

'5':['501@济南','502@青岛'] };

oone.οnchange=function(){

var val=this.value;

var arrA = arr2[val];

var str1='请输入市';

for(var j=0;j

var aaa=arrA[j].split('@');

str1+=""+aaa[1]+""

}

otwo.innerHTML=str1;

otwo.disabled=false;

three.innerHTML='请输入区';

three.disabled='disabled';

}

var arr3 = {

'101':['朝阳区','昌平区'],

'201':['宝山区','浦东区'],

'301':['不知道'],

'401':['真的不知道'],

'501':['市中区','历下区','槐荫区'],

'502':['市南区','市北区','崂山区'] };

otwo.onchange = function(){

var val=this.value;

console.log( this.value);

var str2='请输入区';

console.log(val)

for(var l=0;l

str2+=""+arr3[val][l]+""

}

three.innerHTML=str2;

three.disabled=false;

}