Un lien simple à trois niveaux fait avec JavaScript, très simple et pratique
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> </Title>
</ head>
<body>
Province:
<select id = "pre" onchange = "chg (this);">
<Option Value = "- 1"> Veuillez sélectionner </ Option>
</lect>
ville:
<select id = "city" onchange = "chg2 (this)";> </lect>
district:
<select id = "Area"> </lect>
</docy>
<cript>
// déclare la province
var pres = ["beijing", "shanghai", "shandong"]; // Déclarer directement le tableau
// Déclaration de la ville
var villes = [
["Dongcheng", "Changping", "Haidian"],
["Pudong", "High Zone"],
["Jinan", "Qingdao"]
]]
zones 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"]
]]
]]
// définit un indice public pour une province
var pindex = -1;
var preele = document.getElementById ("pre");
var CityEle = document.getElementByid ("ville");
var arealele = document.getElementById ("zone");
// Définissez d'abord la valeur enregistrée
pour (var i = 0; i <pres.length; i ++) {
// DÉCLARIEZ Option. <Option Value = "Pres [i]"> Pres [i] </ Option>
var op = nouvelle option (pré [i], i);
//Ajouter à
preele.options.add (op);
}
fonction chg (obj) {
if (obj.value == -1) {
CityEle.options.length = 0;
arealele.options.length = 0;
}
// Obtenez la valeur
var val = obj.value;
Pindex = obj.value;
// Obtenez Ctiry
var cs = villes [val];
// Obtenez la zone par défaut
var as = zones [val] [0];
// effacer d'abord le marché
CityEle.options.length = 0;
arealele.options.length = 0;
pour (var i = 0; i <cs.length; i ++) {
var op = nouvelle option (cs [i], i);
CityEle.options.Add (OP);
}
pour (var i = 0; i <as.length; i ++) {
var op = nouvelle option (comme [i], i);
arelele.options.add (op);
}
}
fonction chg2 (obj) {
var val = obj.selectedIndex;
var as = zones [Pindex] [Val];
arealele.options.length = 0;
pour (var i = 0; i <as.length; i ++) {
var op = nouvelle option (comme [i], i);
arelele.options.add (op);
}
}
</cript>
</html>
Ce qui précède est l'intégralité du contenu de cet article, j'espère que vous l'aimez.