省市联动效果源码下载

2025-02-27 技术教程

对于省市联动的效果，在大部分的项目我们都会涉及的，开始刚工作的时候真心害怕这个东西。不知道如何下手去写。后来在我们技术老大的带领下用angular写的省市联动效果，真心不错。但是有些项目我们不需要加载angular。今天我们就单独拿出来用JS 看看如何实现省市联动的效果吧。

第一步：分析一下思路

常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。

我们用简单的案例来一起看看：

functionaddOptions(target,options){varoptionEle=null,target=target,option=options,optionLen=options.length;for(vari=0;i<optionLen;i++){optionEle=document.createElement('option');optionEle.value=option[i].value;optionEle.text=option[i].text;target.options.add(optionEle);}}第三步，当省级的数据变更时，出发change事件：

pro.onchange=function(){console.log(this);varct=city[this.value],ctLen=ct.length,ctBox=[];c.innerHTML="";/*添加城市*/for(varj=0;j<ctLen;j++){ctBox.push({"text":ct[j],"value":ct[j]});}addOptions(c,ctBox);}HTML代码：

<divclass="content"><h4>下拉框联动效果</h4><p>省份：<selectname="provinces"id="provinces"></select></p><p>市：<selectname="citys"id="citys"></select></p></div>JS 部分

varlinkDatas={provinces:[{"code":"0","name":"请选择"},{"code":"1","name":"北京"},{"code":"2","name":"天津"},{"code":"3","name":"河北"},{"code":"4","name":"湖北"},{"code":"5","name":"广东"},{"code":"6","name":"其他"}],citys:{0:["请选择"],1:["朝阳区","海淀区","东城区","西城区","房山区","其他"],2:["天津"],3:["沧州","石家庄","秦皇岛","其他"],4:["武汉市","宜昌市","襄樊市","其他"],5:["广州市","深圳市","汕头市","佛山市","珠海市","其他"],6:["其他"]}};functionaddOptions(target,options){varoptionEle=null,target=target,option=options,optionLen=options.length;for(vari=0;i<optionLen;i++){optionEle=document.createElement('option');optionEle.value=option[i].value;optionEle.text=option[i].text;target.options.add(optionEle);}}functionprovincesCitysLink(pro,c){varLD=linkDatas,provinces=LD.provinces,city=LD.citys,initCity=city[0],proBox=[];/*添加省份*/for(vari=0;i<provinces.length;i++){proBox.push({"text":provinces[i].name,"value":provinces[i].code})}addOptions(pro,proBox);/*初始化城市*/addOptions(c,[{"text":initCity,"value":initCity}]);/*添加联动事件*/pro.onchange=function(){console.log(this);varct=city[this.value],ctLen=ct.length,ctBox=[];c.innerHTML="";/*添加城市*/for(varj=0;j<ctLen;j++){ctBox.push({"text":ct[j],"value":ct[j]});}addOptions(c,ctBox);}}varprovinces=document.getElementById('provinces'),citys=document.getElementById('citys');provincesCitysLink(provinces,citys);

今天就分享到这里，昨晚没我们家俩个宝贝折腾的困的不行了。祝大家学习愉快了！喜欢就动手分享去大家把！