JavaScript natif implémente un menu déroulant dynamique à trois niveaux pour les provinces, les villes et les comtés, exemple de compétences code

Maison

interface Web

js tutoriel

JavaScript natif implémente un menu déroulant dynamique à trois niveaux pour les provinces, les villes et les comtés, exemple de compétences code_javascript

May 16, 2016 pm 03:16 PM

Tout comme lors du choix d'une adresse pour faire du shopping, la liste des villes est chargée dynamiquement à travers la province sélectionnée et la liste des comtés est chargée dynamiquement à travers la ville sélectionnée, de sorte que le lien à trois niveaux des provinces, des villes et des comtés puisse être réalisé. Ce qui suit utilise du JavaScript natif pour implémenter cette fonction :

Laissez-moi d'abord vous montrer les résultats du test :

Lorsqu'aucune sélection n'est effectuée :

Lors de la sélection :

Le code est le suivant :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;三级联动测试&lt;/title&gt;
&lt;script src="jquery-2.1.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
//用来获得option元素中selected属性为true的元素的id
function Get_Selected_Id(place){
var pro = document.getElementById(place);
var Selected_Id = pro.options[pro.selectedIndex].id;
return Selected_Id; //返回selected属性为true的元素的id
}
//改变下一个级联的option元素的内容，即加载市或县
function Get_Next_Place(This_Place_ID,Action){
var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用来记录当前被选中的省或市的ID
if(Action=='Get_city') //从而可以在下一个级联中加载相应的市或县
Add_city(Selected_Id);
else if(Action=='Get_country')
Add_country(Selected_Id);
}
//用来存储省市区的数据结构
var Place_dict = {
"GuangDong":{
"GuangZhou":["PanYu","HuangPu","TianHe"],
"QingYuan":["QingCheng","YingDe","LianShan"],
"FoShan":["NanHai","ShunDe","SanShui"]
},
"ShanDong":{
"JiNan":["LiXia","ShiZhong","TianQiao"],
"QingDao":["ShiNan","HuangDao","JiaoZhou"]
},
"HuNan":{
"ChangSha":["KaiFu","YuHua","WangCheng"],
"ChenZhou":["BeiHu","SuXian","YongXian"]
}
};
//加载城市选项
function Add_city(Province_Selected_Id){
$("#city").empty();
$("#city").append("&lt;option&gt;City&lt;/option&gt;");
$("#country").empty();
$("#country").append("&lt;option&gt;Country&lt;/option&gt;");
//上面的两次清空与两次添加是为了保持级联的一致性
var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典
for(city in province_dict){ //取得省的字典中的城市
//添加内容的同时在option标签中添加对应的城市ID
var text = "&lt;option"+" id='"+city+"'&gt;"+city+"&lt;/option&gt;";
$("#city").append(text);
console.log(text); //用来观察生成的text数据
}
}
//加载县区选项
function Add_country(City_Selected_Id){
$("#country").empty();
$("#country").append("&lt;option&gt;Country&lt;/option&gt;");
//上面的清空与添加是为了保持级联的一致性
var Province_Selected_ID = Get_Selected_Id("province"); //获得被选中省的ID，从而方便在字典中加载数据
var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表
for(index in country_list){
////添加内容的同时在option标签中添加对应的县区ID
var text = "&lt;option"+" id=\'"+country_list[index]+"\'&gt;"+country_list[index]+"&lt;/option&gt;";
$("#country").append(text);
console.log(text); //用来观察生成的text数据
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;您的收货地址：&lt;/p&gt;
&lt;select id="province" onchange="Get_Next_Place('province','Get_city')"&gt;
&lt;option id="Not_data1"&gt;Province&lt;/option&gt;
&lt;option id="GuangDong" value="GuangDong"&gt;GuangDong&lt;/option&gt;
&lt;option id="ShanDong" value="ShanDong"&gt;ShanDong&lt;/option&gt;
&lt;option id="HuNan" value="HuNan"&gt;HuNan&lt;/option&gt;
&lt;/select&gt;
&lt;select id="city" onchange="Get_Next_Place('city','Get_country')"&gt;
&lt;option id="Not_data2"&gt;City&lt;/option&gt;
&lt;/select&gt;
&lt;select id="country"&gt;
&lt;option id="Not_data3"&gt;Country&lt;/option&gt;
&lt;/select&gt;
&lt;br/&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Bien sûr, les provinces, les villes et les comtés sont tous liés dynamiquement. Tant que le contenu de niveau supérieur change, tout le contenu de sous-niveau changera également ou sera réinitialisé en ville ou en pays.

Ce qui précède est le code JavaScript natif que l'éditeur a partagé avec vous pour réaliser l'exemple de code de menu déroulant de liaison dynamique à trois niveaux de province, de ville et de comté. J'espère qu'il sera utile à tout le monde.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn