JS makes a simple three level linkage
- 2020-05-17 04:47:36
- OfStack
With javascript production of a simple 3 - level linkage, very simple and practical
<!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"> Please select a </option>
</select>
City:
<select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
Area:
<select style="width: 100px;" id="area"></select>
</body>
<script>
// Statement of the province
var pres = [" Beijing ", " Shanghai ", " shandong "]; // Direct statement Array
// The statement,
var cities = [
[" dongcheng ", " changping ", " haidian "],
[" In the pudong new area ", " High area "],
[" jinan ", " Qingdao "]
];
var areas = [
[
[" dongcheng 1", " dongcheng 2", " dongcheng 3"],
[" changping 1", " changping 2", " changping 3"],
[" haidian 1", " haidian 2", " haidian 3"]
],
[
[" In the pudong new area 1", " In the pudong new area 2", " In the pudong new area 3"],
[" High area 1", " High area 2", " High area 3"]
],
[
[" jinan 1", " jinan 2"],
[" Qingdao 1", " Qingdao 2"]
]
]
// Set up the 1 The common subscripts of the provinces
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
// Set the value of the save first
for (var i = 0; i < pres.length; i++) {
// The statement 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;
}
// Get the value
var val = obj.value;
pIndex = obj.value;
// To obtain ctiry
var cs = cities[val];
// Get the default area
var as = areas[val][0];
// To empty the city
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>
That's all for this article, I hope you enjoy it.