Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<body>
<select id= "province" onchange= "Func1 (this)" ></select>
<select id= "City" ></select>
<script>
data={"Anhui": ["Ma On Shan", "Hefei", "Wuhu", "Tongling", "Bengbu"], "Jiangsu": ["Nanjing", "Suzhou", "Wuxi", "Changzhou", "Nantong"], "Shandong": ["Jinan", "Qingdao", "Jimo", "Penglai", "Taizhou"]};
var Pro=document.getelementbyid ("province"); Locate the label object for the province
var Cit=document.getelementbyid ("City"); Find the Label object of the city
For (var k in data) {//Traversal data data K is key province name
var opt=document.createelement ("option"); Create label for option
Pro.appendchild (opt); Add the option label created to the province
opt.innerhtml=k; Add the text of the K key to the tag
}
function func1 (EV) {
cit.options.length=0; Here's the trick of using options.length=0 to empty the option added after each click
for (var i in Data[ev.value]) {//This.value is the key value in the original province
var op=document.createelement ("option"); Create label for option
cit.appendchild (OP); Add the option created
Op.innerhtml=data[ev.value][i]; Note: I is not the content of the key data is the index cannot be directly =i
}
}
</script>
</body>
================== Note: Here is not directly in the HTML to write dead static code, because if the data added and modification will be cumbersome, with the JS statement control only need to modify data ======================== ==
PS: The process of learning is a bit of accumulation, not smart can be successful!
Js Province City Two-level dynamic linkage example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
