Example of JavaScript provincial and municipal link drop down menu
- 2021-07-21 06:00:57
- OfStack
Recently, I learned a simple example about provincial and municipal associations, and posted it to share it with you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
<option> Please select a province </option>
</select>
<select id="selCity">
<option> Please select a city </option>
</select>
<script>
function $(ID){
return document.getElementById(ID);
}
var cityList=new Array();
cityList[' Beijing ']=[' Dongcheng District ',' Xicheng District ',' Changping District '];
cityList[' Hebei Province ']=[' Baoding ',' Shijiazhuang ',' Dingzhou '];
cityList[' Jiangsu Province '] = [' Nanjing City ',' Suzhou City ',' Wuxi City '];
cityList[' Zhejiang Province '] = [' Hangzhou ',' Ningbo City ',' Wenzhou City '];
cityList['4 Sichuan Province '] = ['4 Sichuan Province ',' Chengdu '];
cityList[' Hainan Province '] = [' Haikou City '];
function changeCity(){
var province=$("selProvince").value;
var city=$("selCity");
city.options.length=0;
for (var i in cityList) {
if(i==province){
for (var j in cityList[i]) {
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}
}
}
function allCity(){
var province=$("selProvince");
for (var i in cityList) {
province.add(new Option(i,i),null);
}
}
window.onload=allCity;
</script>
</body>
</html>