知識點：
- 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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
