js省市二級聯動實例


//動態創建省市二級聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="func1(this)">

</select>
<select id="city">

</select>
</body>
<script>
data={"河北省":["邯鄲","廊坊"],"北京":["海淀","朝陽"],"山東省":["青島","濟南"]}
var pro=document.getElementById("province"); //先拿到select的省級對象
var city=document.getElementById("city"); //拿到市級對象
var option_pro=document.createElement("option") //創建標簽
option_pro.innerHTML=i; //往標簽里添加省份
pro.appendChild(option_pro); //往父標簽pro里加option_pro標簽
}
function func1(self) { //定義事件函數---目的是拿到被先中的省份,才能對應城市添加到其中
//拿到options數組.數組的索引.拿到標簽對象里的文本
var choice=(self.options[self.selectedIndex]).innerHTML;
city.options.length=0;
for (var i in data[choice]) {
var option_city=document.createElement("option");
option_city.innerHTML=data[choice][i];
city.appendChild(option_city)
}
}
</script>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM