省市区三级联动
前端实现省市区三级联动的方法有很多,我就用我认为最简单的方式进行实现。为了选取和操作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) }) })
效果如下:
实现的方式有很多,推荐几个比较好的: