Uma ligação simples de três níveis feita com JavaScript, muito simples e prática
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> </title>
</head>
<Body>
Província:
<select id = "pre" onchange = "chg (this);">
<opção value = "-1"> Selecione </pption>
</leclect>
cidade:
<select id = "city" onchange = "chg2 (this)";> </leclect>
distrito:
<select id = "Area"> </leclect>
</body>
<Cript>
// declarar a província
var pres = ["Pequim", "Shanghai", "Shandong"]; // declarar diretamente a matriz
// Declaração da cidade
var cidades = [
["Dongcheng", "Changing", "Haidian"],
["Pudong", "High Zone"],
["Jinan", "Qingdao"]
];
var áreas = [
[[
["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"]
]
]
// Defina um subscrito público para uma província
var Pindex = -1;
var preele = document.getElementById ("pre");
var caterele = document.getElementById ("cidade");
vareEle = document.getElementById ("área");
// Defina o valor salvo primeiro
for (var i = 0; i <pres.Length; i ++) {
// Opção Declare. <Opção value = "pres [i]"> pres [i] </pption>
var op = nova opção (pres [i], i);
//Adicionar à
preele.options.add (op);
}
função chg (obj) {
if (obj.value == -1) {
coubele.Options.Length = 0;
AreaEle.Options.Length = 0;
}
// Obtenha o valor
var val = obj.value;
pindex = obj.value;
// pegue ctiry
var cs = cidades [Val];
// Obtenha a área padrão
var como = áreas [Val] [0];
// Limpe o mercado primeiro
coubele.Options.Length = 0;
AreaEle.Options.Length = 0;
for (var i = 0; i <cs.Length; i ++) {
var op = nova opção (cs [i], i);
countyele.Options.add (OP);
}
for (var i = 0; i <as.length; i ++) {
var op = nova opção (como [i], i);
AreaEle.Options.Add (OP);
}
}
função chg2 (obj) {
var val = obj.SelectedIndex;
var as = áreas [Pindex] [Val];
AreaEle.Options.Length = 0;
for (var i = 0; i <as.length; i ++) {
var op = nova opção (como [i], i);
AreaEle.Options.Add (OP);
}
}
</script>
</html>
O exposto acima é o conteúdo inteiro deste artigo, espero que gostem.