jQuery实现省市联动
Posted jiguiyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现省市联动相关的知识，希望对你有一定的参考价值。
未实现任何功能之前：
实现功能之后：
实现该功能的jQuery核心代码：
<script>
var provinceArr=new Array(5);
provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市");
provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");
provinceArr[3]=new Array("西安市","宝鸡市","延安");
provinceArr[4]=new Array("菏泽市","济南市","青岛");
$(function(){
$("#province").change(function(){
$("#city").empty();//清空
var provinceID=this.value;
if(provinceID==-1){
$("#city").html("<option value="-1">--请选择--</option>");
}else{
for(var i=0;i<provinceArr[provinceID].length;i++){
var ption=document.createElement("option");//创建节点
console.log(ption);
ption.innerText=provinceArr[provinceID][i];
$("#city").append(ption);
}
}
});
})
</script>
实现该二级省市联动的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery实现省市联动</title> 6 <script src="js/jquery-3.3.1.js"></script> 7 <script> 8 var provinceArr=new Array(5); 9 provinceArr[0]=new Array("南安市","泉州市","厦门市","福安市","福州市"); 10 provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市"); 11 provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸"); 12 provinceArr[3]=new Array("西安市","宝鸡市","延安"); 13 provinceArr[4]=new Array("菏泽市","济南市","青岛"); 14 15 $(function(){ 16 $("#province").change(function(){ 17 18 $("#city").empty();//清空 19 var provinceID=this.value; 20 if(provinceID==-1){ 21 $("#city").html("<option value="-1">--请选择--</option>"); 22 }else{ 23 for(var i=0;i<provinceArr[provinceID].length;i++){ 24 var ption=document.createElement("option");//创建节点 25 console.log(ption); 26 ption.innerText=provinceArr[provinceID][i]; 27 $("#city").append(ption); 28 } 29 } 30 }); 31 32 33 34 35 36 }) 37 </script> 38 </head> 39 <body> 40 <select id="province"> 41 <!--显示省份--> 42 <option value="-1">--请选择--</option> 43 <option value="0">福建省</option> 44 <option value="1"> 河南省</option> 45 <option value="2">河北省</option> 46 <option value="3">陕西省</option> 47 <option value="4">山东省</option> 48 49 </select> 50 <select id="city"> 51 <!--显示市--> 52 <option value="-1">--请选择--</option> 53 </select> 54 </body> 55 </html>
当选择另一个省份时，把现有的城市清空，将更新为所选省份的的城市
$("#city").empty();//清空
创建节点是为了使省份的城市在option中显示
var ption=document.createElement("option");//创建节点 ption.innerText=provinceArr[provinceID][i]; $("#city").append(ption);
以上是关于jQuery实现省市联动的主要内容，如果未能解决你的问题，请参考以下文章
PHP + jQuery + Json 实现中国省市区三级联动