<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>三级联动</title>
</head>
<body>
省：<select id="sel1"></select>
市：<select id="sel2"></select>
区：<select id="sel3"></select>
</body>
<script type="text/javascript">
var arr=[
'山东',[
'泰安',['岱岳','泰山','高新'],
'淄博',['周村','张店','临淄']
],
'北京',[
'朝阳',['岱岳1','泰山1','高新1'],
'海淀',['周村1','张店1','临淄1']
],
'山西',[
'太原',['岱岳2','泰山2','高新2'],
'运城',['周村2','张店2','临淄2']
]
];
var sel1=document.querySelector('#sel1');
var sel2=document.querySelector('#sel2');
var sel3=document.querySelector('#sel3');
for(var i=0;i<arr.length;i++){
if(typeof arr[i]=='string'){
sel1.add(new Option(arr[i],arr[i]));
}
}
sel1.onchange=function(){
for(var i=0;i<arr.length;i++){
if(typeof arr[i]=='string'){
if(sel1.value==arr[i]){
var brr=arr[i+1];
sel2.innerHTML=''
for(var j=0;j<arr.length;j++){
if(typeof brr[j]=='string'){
sel2.add(new Option(brr[j],brr[j]));
}
}
}
}
}
}
sel2.onchange=function(){
for(var i=0;i<arr.length;i++){
if (typeof arr[i]!='string') {
var brr=arr[i];
for(var j=0;j<brr.length;j++){
if(typeof brr[j]=='string'){
if(brr[j]==sel2.value){
var crr=brr[j+1]
sel3.innerHTML=''
for(var k=0;k<crr.length;k++){
sel3.add(new Option(crr[k],crr[k] ));
}
}
}
}
}
}
}
</script>
</html>