省市区三级联动

Posted 孙氏楼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市区三级联动相关的知识,希望对你有一定的参考价值。

前端实现省市区三级联动的方法有很多,我就用我认为最简单的方式进行实现。为了选取和操作dom方便我引入了jquery.

html代码:

          <div>
            <select name="" id="pro">//省
                <!--<option value=""></option>-->
            </select>
            <select name="" id="city">//市
                <!--<option value=""></option>-->
            </select>
            <select name="" id="area">//区
                <!--<option value=""></option>-->
            </select>
          </div>            

数据三个数组,分别代表省,市,区,这个数据可以是后台从数据库读出来的数据,也可以是在JS里直接写的数据。但无论是哪种形式,三个数组的数据都是有关联的。arr_c,市数组,里面每一项内容都有一个属性‘pid’,表示这个市是属于哪个省的,即pid对应的是省数组里的id。同样arr_a,区数组,里面的cid是对应市数组里的id,表示这个区是属于哪个市的。

let arr_p = [
                    {id:"0","text":"请选择省份"},
                    {id:"1","text":"北京"},
                    {id:"2","text":"上海"},
                    {id:"3","text":"安徽"},
                    {id:"4","text":"浙江"},
                    {id:"5","text":"江苏"}
               ]
            let arr_c = [
                    {id:"0",pid:"0","text":"请选择城市"},
                    {id:"1",pid:"1","text":"北京1"},
                    {id:"2",pid:"1","text":"北京2"},
                    {id:"3",pid:"1","text":"北京3"},
                    {id:"4",pid:"1","text":"北京4"},
                    {id:"5",pid:"2","text":"上海1"},
                    {id:"6",pid:"2","text":"上海2"},
                    {id:"7",pid:"2","text":"上海3"},
                    {id:"8",pid:"3","text":"安徽1"},
                    {id:"9",pid:"3","text":"安徽2"},
                    {id:"10",pid:"4","text":"浙江1"},
                    {id:"11",pid:"4","text":"浙江2"},
                    {id:"12",pid:"4","text":"浙江3"}    
            ]
            
            let arr_a = [
                    {id:"0",cid:"0","text":"请选择地区"},
                    {id:"1",cid:"1","text":"北京1区"},
                    {id:"2",cid:"1","text":"北京1区"},
                    {id:"3",cid:"1","text":"北京1区"},
                    {id:"4",cid:"2","text":"北京2区"},
                    {id:"5",cid:"2","text":"北京2区"},
                    {id:"6",cid:"3","text":"北京3区"},
                    {id:"7",cid:"3","text":"北京3区"},
                    {id:"8",cid:"4","text":"北京4区"},
                    {id:"9",cid:"4","text":"北京4区"},
                    {id:"10",cid:"4","text":"北京4区"},
                    
                    {id:"11",cid:"5","text":"上海1区"},
                    {id:"12",cid:"5","text":"上海1区"},
                    {id:"13",cid:"5","text":"上海1区"},
                    {id:"14",cid:"6","text":"上海2区"},
                    {id:"15",cid:"6","text":"上海2区"},
                    {id:"16",cid:"6","text":"上海2区"},
                    {id:"17",cid:"7","text":"上海3区"},
                    {id:"18",cid:"7","text":"上海3区"},
                    {id:"19",cid:"7","text":"上海3区"},
                    {id:"20",cid:"7","text":"上海3区"},
                    
                    
                    {id:"21",cid:"8","text":"安徽1区"},
                    {id:"22",cid:"8","text":"安徽1区"},
                    {id:"23",cid:"8","text":"安徽1区"},
                    {id:"24",cid:"8","text":"安徽1区"},
                    {id:"26",cid:"9","text":"安徽2区"},
                    {id:"27",cid:"9","text":"安徽2区"},
                    {id:"28",cid:"9","text":"安徽2区"},
                    {id:"29",cid:"9","text":"安徽2区"},
                    {id:"30",cid:"10","text":"安徽3区"},
                    {id:"31",cid:"10","text":"安徽3区"},
                    {id:"32",cid:"10","text":"安徽3区"},
                    {id:"33",cid:"10","text":"安徽3区"},
                
                
                    {id:"34",cid:"11","text":"浙江1区"},
                    {id:"35",cid:"11","text":"浙江1区"},
                    {id:"36",cid:"12","text":"浙江2区"},    
                    {id:"37",cid:"12","text":"浙江2区"},
                    {id:"38",cid:"12","text":"浙江2区"},
                    {id:"39",cid:"13","text":"浙江3区"},
                    {id:"40",cid:"13","text":"浙江3区"},
                    {id:"41",cid:"13","text":"浙江3区"}
            ]

接着添加一个方法selPro,该方法循环arr_p数组(省数据),为第一个下拉框添加选项。

function selPro(){
                    let len = arr_p.length;
                    let p = $("#pro")
                    for(var i=0;i<len;i++){
                        var option =`<option value=${arr_p[i].id}>${arr_p[i].text}</option>`
                        p.append(option)
                    }
            }

然后添加方法selCity,该方法和selPro类似,循环为第二个下拉框添加选项,主要的区别就是只添加某个省的市数据,添加哪个省的市数据,取决于第一个下拉框选的是哪个省,就是通过参数传过来的省id。代码如下。

function selCity(pid){
                let len = arr_c.length;
                let c = $("#city")
                c.empty()
                for(var i=0;i<len;i++){
                    if(arr_c[i].pid==pid){
                        let option = `<option value=${arr_c[i].id}>${arr_c[i].text}</option>`
                        c.append(option)
                    }
                    
                }
                
            }

最后添加的方法是selArea,和selCity方法一样,生成区下拉框,用哪个市的区取决于第二个下拉框选的数据。代码如下

function selArea(cid){
                let len = arr_a.length;
                let a = $("#area");
                a.empty()
                for(var i=0;i<len;i++){
                    if(arr_a[i].cid==cid){
                        let option = `<option value=${arr_a[i].id}>${arr_a[i].text}</option>`
                    a.append(option)
                    }
                    
                }    
            }

然后为第一个下拉框添加change事件,就是当第一个下拉框选择不同的省时,需要用该省下的市数据填充到第二个下拉框里。

同理要为第二个下拉框添加change事件,当第二个下拉框选择不同的市时,需要用该市下的区数据填充到第三个下拉框里。

代码如图。

$(function(){
                selPro();//对三个下拉框进行加载
                selCity(0);
                selArea(0);
$(
"#pro").change(function(){ let pid=$(this).val(); selCity(pid); let cid = $("#city").val(); selArea(cid) }) $("#city").change(function(){ let cid = $(this).val(); selArea(cid) }) })

效果如下:

实现的方式有很多,推荐几个比较好的:
 

以上是关于省市区三级联动的主要内容,如果未能解决你的问题,请参考以下文章

三级联动怎么回显 javaweb

省市区三级菜单联动插件

c# 做省市县联动

省市区三级联动(vue)

调接口省市区三级联动相关代码

省市区三级联动