js_省市二級聯動
阿新 • • 發佈：2020-08-16
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<!--<!– <script src="js_file01.js"></script>–> 儘量放後body前邊-->
</head>
<body>
<!--<select id="province" onchange="func1()">--><!-- <option value="beijing">北京</option>-->
<!-- <option value="shanghai">上海</option>-->
<!-- <option value="guangzhou">廣州</option>-->
<!-- <option value="shenhen">深圳</option>-->
<!--</select>-->
<select id="province" onchange="func1(this)">
</select>
<select id="city">
</select>
<script>
data={"河南省":["許昌","鄭州"],"北京市":["海淀區","朝陽區"],"山東省":["青島市","濟南市"]};
// for (var i in data["河南省"]){ // i: 0 1
// alert(i);
// }
// function func1() {
// ret=document.getElementById("province");
// console.log(ret.value);// }
var pro=document.getElementById("province");
var ci=document.getElementById("city");
for (var i in data ){ // 動態--建立
var re=document.createElement("option");
re.innerHTML=i;
pro.appendChild(re);
}
// console.log(self.options[self.selectedIndex].innerHTML);
// self.options: 所有省對標籤 // self.selectedIndex： 索引
// innerHTML：文字內容
function func1(self) {
var choice = self.options[self.selectedIndex].innerHTML;
// var options=city.children;
// for (var k=0;k<options.length;k++){
// city.removeChild(options[k]);
// k--;
// }
city.options.length=0;
for (var i in data[choice]){
// alert(i);
var re1=document.createElement("option");
re1.innerHTML=data[choice][i];
ci.appendChild(re1);
}
}
</script>
</body>
</html>