Tautan tiga tingkat sederhana yang dibuat dengan javascript, sangat sederhana dan praktis
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> </title>
</head>
<body>
Propinsi:
<pilih id = "pre" onchange = "chg (ini);">
<Option value = "-1"> Pilih </potion>
</pilih>
kota:
<pilih id = "city" onchange = "chg2 (this)";> </select>
daerah:
<Pilih id = "Area"> </pilih>
</body>
<script>
// menyatakan provinsi
var pres = ["beijing", "shanghai", "shandong"]; // Langsung mendeklarasikan array
// Pernyataan Kota
var cities = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "zona tinggi"],
["Jinan", "Qingdao"]
];
Area var = [
[
["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"]
]
]
// Tetapkan subskrip publik untuk provinsi
var pindex = -1;
var preele = document.geteLementById ("pre");
var cityele = document.geteLementById ("city");
var areaele = document.geteLementById ("area");
// Atur nilai yang disimpan terlebih dahulu
untuk (var i = 0; i <pres.length; i ++) {
// mendeklarasikan opsi. <Opsi value = "pres [i]"> pres [i] </pection>
var op = opsi baru (pres [i], i);
// tambahkan ke
preele.options.add (op);
}
fungsi chg (obj) {
if (obj.value == -1) {
cityele.options.length = 0;
Areaele.Options.length = 0;
}
// Dapatkan nilainya
var val = obj.value;
pindex = obj.value;
// Dapatkan ctiry
var cs = kota [val];
// Dapatkan area default
var as = area [val] [0];
// Bersihkan pasar dulu
cityele.options.length = 0;
Areaele.Options.length = 0;
untuk (var i = 0; i <cs.length; i ++) {
var op = opsi baru (CS [i], i);
cityele.options.add (op);
}
untuk (var i = 0; i <as.length; i ++) {
var op = opsi baru (sebagai [i], i);
Areaele.Options.Add (OP);
}
}
fungsi chg2 (obj) {
var val = obj.SelectedIndex;
var as = area [pindex] [val];
Areaele.Options.length = 0;
untuk (var i = 0; i <as.length; i ++) {
var op = opsi baru (sebagai [i], i);
Areaele.Options.Add (OP);
}
}
</script>
</html>
Di atas adalah seluruh konten artikel ini, saya harap Anda menyukainya.