<! DOCTYPE html>
>
>
<meta CharSet="UTF-8">
<title></title>
<style type= "Text/css">
*{margin: 0;p adding: 0;}
</style>
>
<body>
<div id= "box">
<select name= "" id="sh" style="width: +px;" onchange="ch (This)" >
<option value=""> Please select </option>
</select>
<select name= "" id="si" style="width: +px" Onchange="Ch1 (This)" >
<option value=""> Please select </option>
</select>
<select name= "" id= "qu" style="width: px" >
<option value=""> Please select </option>
</select>
</div>
</body>
<script type= "Text/javascript">
var sheng = document.getElementById ("sh");
var shi = document.getElementById ("Si");
var qu = document.getElementById ("Qu");
var Shengarr = ["Beijing","Shanghai","Gansu"];
var Shiarr = [
["Haidian", "Fengtai", "Daxing"],
["Pudong", "high area", "Development zone"],
["Tianshui", "Silver", "Lanzhou"]
];
var Quarr = [
[
["Haidian 1", "Haidian 2", "Haidian 3"],
["Fengtai 1", "Fengtai 2", "Fengtai 3"],
["Daxing 1", "Daxing 2", "Daxing 3"]
],
[
["Pudong 1", "Pudong 2", "Pudong 3"],
["High Zone 1", "High Zone 2", "high Zone 3"],
["Development Zone 1", "Development Zone 2", "Development Zone 3"]
],
[
["Tianshui 1", "Tianshui 2", "Tianshui 3"],
["Baiyin District", "Pcs District", "Jingyuan County"],
["Xigu", "Xi Guan", "Dong Guan"]
]
];
//Set the province value first
For (var i = 0; I < shengarr.length; I+ +) {
var s = new Option (Shengarr[i], i);
Sheng.options.add (s);
}
//Set public subscript for a province
var index =-1;
function ch(obj) {
if (obj.value = =-1) {
The//options collection can return an array containing all <option> in the <select> element
qu.options.length = 0;
shi.options.length = 0;
}
//Get value
var val = obj.value;
Index = obj.value;
//access to City
var cs = Shiarr[val];
//get default zone
var as = quarr[val][0];
//Clear the city and district first
Shi.options.length = 0;
Qu.options.length = 0;
For (var i = 0; I < cs.length; I+ +) {
The first parameter is the text value of option, and the second parameter is the value of option
var op = new Option (cs[i], i);
Shi.options.add (OP);
}
For (var i = 0; I < as.length; I+ +) {
var op = new Option (as[i], i);
Qu.options.add (OP);
}
}
function ch1(obj) {
//selectedindex property to set or return the index number of the selected option in the drop-down list
var val = Obj.selectedindex; Get value values
var as = Quarr[index][val]; //
console. log ("ddd");
Qu.options.length = 0;
For (var i = 0; I < as.length; I+ +) {
var op = new Option (as[i], i);
Qu.options.add (OP);
}
}
</script>
>
A simple three-level linkage exercise
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
