Un enlace simple de tres niveles hecho con JavaScript, muy simple y práctico
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> </title>
</ablo>
<Body>
Provincia:
<select id = "pre" onchange = "chg (this);">
<opción valor = "-1"> Seleccione </opción>
</select>
ciudad:
<Select id = "City" onChange = "CHG2 (this)";> </select>
distrito:
<select id = "área"> </select>
</body>
<script>
// Declarar la provincia
var pres = ["beijing", "shanghai", "shandong"]; // declara directamente la matriz
// Declaración de la ciudad
Ciudades var = [
["Dongcheng", "Changing", "Haidian"],
["Pudong", "zona alta"],
["Jinan", "Qingdao"]
];
áreas var = [
[
["DongCheng1", "Dongcheng2", "Dongcheng3"],
["Changping 1", "Changping 2", "Changping 3"],
["Haidian 1", "Haidian 2", "Haidian 3"]
]
[
["Pudong 1", "Pudong 2", "Pudong 3"],
["Zona alta 1", "Zona alta 2", "Zona alta 3"]
]
[
["Jinan 1", "Jinan 2"],
["Qingdao 1", "Qingdao 2"]
]
]
// Establecer un subíndice público para una provincia
var pindex = -1;
var preele = document.getElementById ("pre");
var cityele = document.getElementById ("Ciudad");
var áreaeele = document.getElementById ("área");
// Establecer el valor guardado primero
para (var i = 0; i <pres.length; i ++) {
// declarar opción. <Opción value = "pres [i]"> pres [i] </opción>
var op = nueva opción (pres [i], i);
//Añadir
preele.options.add (op);
}
función chg (obj) {
if (obj.value == -1) {
cityEle.options.length = 0;
axeele.options.length = 0;
}
// Obtener el valor
var val = obj.value;
pindex = obj.Value;
// Obtener ctiry
var cs = ciudades [val];
// Obtener el área predeterminada
var as = áreas [val] [0];
// borra el mercado primero
cityEle.options.length = 0;
axeele.options.length = 0;
para (var i = 0; i <cs.length; i ++) {
var op = nueva opción (cs [i], i);
cityEle.options.Add (OP);
}
para (var i = 0; i <as.length; i ++) {
var op = nueva opción (como [i], i);
axeele.options.add (op);
}
}
función chg2 (obj) {
var val = obj.selectedIndex;
var as = áreas [pindex] [val];
axeele.options.length = 0;
para (var i = 0; i <as.length; i ++) {
var op = nueva opción (como [i], i);
axeele.options.add (op);
}
}
</script>
</html>
Lo anterior es todo el contenido de este artículo, espero que les guste.