Eine einfache dreistufige Verknüpfung mit JavaScript, sehr einfach und praktisch
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> </title>
</head>
<body>
Provinz:
<select id = "pre" onchange = "chg (this);">
<Option Value = "-1"> Bitte wählen Sie </Option>
</select>
Stadt:
<select id = "city" onchange = "chg2 (this)";> </select>
Bezirk:
<select id = "ase"> </select>
</body>
<Script>
// die Provinz deklariere
var pres = ["Peking", "Shanghai", "Shandong"]; // Array direkt deklarieren
// Erklärung der Stadt
var Städte = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "hohe Zone"],
["Jinan", "Qingdao"]
];
var Bereiche = [
[
["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"]
]
]
// Legen Sie ein öffentliches Index für eine Provinz fest
var pindex = -1;
var preele = document.getElementById ("pre");
var Cityele = document.getElementById ("Stadt");
var Areaele = document.getElementById ("Bereich");
// Stellen Sie den gespeicherten Wert zuerst fest
für (var i = 0; i <pres.Length; i ++) {
// Option deklarieren. <Option Value = "Pres [i]"> Pres [i] </option>
var op = neue Option (Pres [i], i);
//Hinzufügen zu
preele.options.add (op);
}
Funktion chg (obj) {
if (obj.value == -1) {
Cityele.options.length = 0;
AreaEele.Options.length = 0;
}
// den Wert erhalten
var val = obj.value;
pindex = obj.value;
// Ctiry bekommen
var cs = Städte [val];
// Erhalten Sie den Standardbereich
var as = Bereiche [val] [0];
// den Markt zuerst löschen
Cityele.options.length = 0;
AreaEele.Options.length = 0;
für (var i = 0; i <csgth; i ++) {
var op = neue Option (CS [i], i);
Cityele.options.Add (op);
}
für (var i = 0; i <as.length; i ++) {
var op = neue Option (als [i], i);
AreaEele.Options.Add (Op);
}
}
Funktion chg2 (obj) {
var val = obj.selectedIndex;
var as = Bereiche [Pindex] [Val];
AreaEele.Options.length = 0;
für (var i = 0; i <as.length; i ++) {
var op = neue Option (als [i], i);
AreaEele.Options.Add (Op);
}
}
</script>
</html>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es gefällt Ihnen.