Home > Developer > JavaScript
JS makes a simple three-level linkage,
A simple three-level linkage made with javascript is very simple and practical
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
Save:
<Select style = "width: 100px;" id = "pre" onchange = "chg (this);">
<Option value = "-1"> select </option>
</Select>
City:
<Select style = "width: 100px;" id = "city" onchange = "chg2 (this)";> </select>
ZONE:
<Select style = "width: 100px;" id = "area"> </select>
</Body>
<Script>
// Declare the province
Var pres = ["Beijing", "Shanghai", "Shandong"]; // directly declare Array
// Declare the city
Var cities = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "high area"],
["Jinan", "Qingdao"]
];
Var areas = [
[
["Dongcheng 1", "Dongcheng 2", "Dongcheng 3"],
["Changping 1", "Changping 2", "Changping 3"],
["Haidian 1", "Haidian 2", "Haidian 3"]
],
[
["Pudong 1", "Pudong 2", "Pudong 3"],
["High area 1", "high area 2", "high area 3"]
],
[
["Jinan 1", "Jinan 2"],
["Qingdao 1", "Qingdao 2"]
]
]
// Set the public subscript of a province
Var pIndex =-1;
Var preEle = document. getElementById ("pre ");
Var cityEle = document. getElementById ("city ");
Var areaEle = document. getElementById ("area ");
// Set the province value first
For (var I = 0; I <pres. length; I ++ ){
// Declare option. <option value = "pres [I]"> Pres [I] </option>
Var op = new Option (pres [I], I );
// Add
PreEle. options. add (op );
}
Function chg (obj ){
If (obj. value =-1 ){
CityEle. options. length = 0;
AreaEle. options. length = 0;
}
// Obtain the value
Var val = obj. value;
PIndex = obj. value;
// Obtain ctiry
Var cs = cities [val];
// Obtain the default zone
Var as = areas [val] [0];
// Clear the city first
CityEle. options. length = 0;
AreaEle. options. length = 0;
For (var I = 0; I <cs. length; I ++ ){
Var op = new Option (cs [I], I );
CityEle. options. add (op );
}
For (var I = 0; I <as. length; I ++ ){
Var op = new Option (as [I], I );
AreaEle. options. add (op );
}
}
Function chg2 (obj ){
Var val = obj. selectedIndex;
Var as = areas [pIndex] [val];
AreaEle. options. length = 0;
For (var I = 0; I <as. length; I ++ ){
Var op = new Option (as [I], I );
AreaEle. options. add (op );
}
}
</Script>
</Html>
The above is all the content of this article. I hope you will like it.
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
