省市区三级联动
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) }) })
效果如下：
以上是关于省市区三级联动的主要内容，如果未能解决你的问题，请参考以下文章