省市区三级联动

前端实现省市区三级联动的方法有很多，我就用我认为最简单的方式进行实现。为了选取和操作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)
                    
                })    
            })
            

效果如下：

实现的方式有很多，推荐几个比较好的：

https://www.cnblogs.com/maderlzp/p/7687161.html

http://blog.csdn.net/ghjzzhg/article/details/73607565