A simple three-level linkage made with javascript, very simple and practical
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Province:
<select id="pre" onchange="chg(this);">
<option value="-1">Please select</option>
</select>
city:
<select id="city" onchange="chg2(this)" ;></select>
district:
<select id="area"></select>
</body>
<script>
//Declare the province
var pres = ["Beijing", "Shanghai", "Shandong"]; //Directly declare Array
//Statement of the city
var cities = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "high zone"],
["Jinan", "Qingdao"]
];
var areas = [
[
["Dongcheng1", "Dongcheng2", "Dongcheng3"],
["Changping 1", "Changping 2", "Changping 3"],
["Haidian 1", "Haidian 2", "Haidian 3"]
],
[
["Pudong 1", "Pudong 2", "Pudong 3"],
["High Zone 1", "High Zone 2", "High Zone 3"]
],
[
["Jinan 1", "Jinan 2"],
["Qingdao 1", "Qingdao 2"]
]
]
//Set a public subscript for a province
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
//Set the saved 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 to
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;
//Get ctiry
var cs = cities[val];
//Get the default area
var as = areas[val][0];
//Clear the market 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 the entire content of this article, I hope you like it.