码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现省市联动

时间:2019-03-17 13:27:27      阅读:687      评论:0      收藏:0      [点我收藏+]

标签:create   option   lap   onclick   isp   set   console   innertext   col   

未实现任何功能之前:

技术图片

实现功能之后:

技术图片

 

 实现该功能的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>
jQuery实现省市联动.html

 

当选择另一个省份时,把现有的城市清空,将更新为所选省份的的城市

$("#city").empty();//清空

 

创建节点是为了使省份的城市在option中显示

var ption=document.createElement("option");//创建节点
                        ption.innerText=provinceArr[provinceID][i];
                        $("#city").append(ption);

 

jQuery实现省市联动

标签:create   option   lap   onclick   isp   set   console   innertext   col   

原文地址:https://www.cnblogs.com/jiguiyan/p/10546268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!