三级联动（最详注释笔记）
2017-06-21 本文已影响45人
woow_wu7
知识点：
- disabled属性：
属性规定某个选项应该被禁用。被禁用的选项既不可用，也不可点击。 - onchange事件：
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。 - split方法：
split() 方法用于把一个字符串分割成字符串数组。
<!DOCTYPE html>
<html lang="zh-cn">
<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 othree = document.getElementById('three');
otwo.disabled = true;
othree.disabled = true;
var str = ' ';
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":['100@北京'],
"2":['200@渝北区','201@江北区','202@沙坪坝区'],
"3":['300@傅东区'],
"4":['400@广州'],
"5":['500@东莞']
}
//onchange:指事件会域的内容发生改变时发生
oone.onchange = function() { //第一个下拉框选中之后执行的函数
var val = this.value; //this指的是oone对象，即<select id="one">,关联的是arr1的id值，即第一个下拉框的value值。
var arrA = arr2[val]; // arrA得到对应的第一个下拉框的选中值的arr2对象中的 []数组里的内容；
var str1 = "<option>请输入市</option>" //这里也可以设置str1 = ' ';在otwo.innerHTML = str1处改写成 otwo.innerHTML += str1;
for(j=0; j<arrA.length; j++){
var aaa = arrA[j].split('@'); // split()方法是将一个字符串分割成 字符串数组；
str1 += "<option value=" +aaa[0]+ ">" +aaa[1]+ "</option>"
} //比如选中北京，那么aaa[0]=100,aaa[1]=北京
otwo.innerHTML = str1;
otwo.disabled =false; //让<select id="two">处于可操作状态；
}
var arr3 = {
"100":['朝阳区','东城区'],
"200":['光电园','人和'],
"201":['观音桥','红旗河沟'],
"202":['大学城','三峡广成'],
"300":['简单的'],
"400":['简单的'],
"500":['简单的']
}
otwo.onchange = function() {
var val2 = this.value;
var arrB = arr3[val2];
var str2 = "<option>请输入区</option>"
for(k=0; k<arrB.length; k++){
str2 += "<option>"+arrB[k]+"</option>"
}
othree.innerHTML = str2;
othree.disabled = false;
}
</script>
</body>
</html>
