宝哥软件园

基于射流研究…实现省市联动效果代码分享

编辑:宝哥软件园 来源:互联网 时间:2021-10-28

在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区、品种等有多级选项时。比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变。

思路:

1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化。

下面是造的省市的数据:

var LinkDatas={省份3360[{ '代码' : ' 0 ','名称' : '请选择},{ '代码' :'1 ','名称' : '北京},{ '代码' :'2 ','名称' : '天津},{ '代码' :'3 ','名称' : '河北},{ '代码' :'4 ','名称' : '湖北},{ '代码' :'5 ','名称' : '广东},{ '代码' :'6 ','名称' : '其他}],citys:{0:['请选择'],1:['朝阳区','海淀区','东城区','西城区','房山区','其他'],2:['天津'],3:['沧州','石家庄','秦皇岛','其他'],4:['武汉市','宜昌市','襄樊市','其他'],5:['广州市','深圳市','汕头市','佛山市','珠海市','其他'],6:['其他']}};2,根据数据动态生成选择权节点:

函数addOptions(target,options){var optionEle=null,target=target,option=options,option len=options . length for(var I=0;我选项;I){选项ele=文档。创建元素('选项');optionEle.value=option[i].价值;optionEle.text=option[i].文本;目标。选项。添加(选项ele);}}3,根据上述省市数据,其中密码代表"省级"指向"城市"的标识符,当省级的数据变更时,出发变化事件:

专业人士。onchange=function(){ console。日志(这个);var ct=city[this.value],ctLen=ct.length,ctBox=[];c.innerHTML=/*添加城市*/for(var j=0;j ctLenj){ ctbox。push({ ' text ' : CT[j],' value ' : CT[j]});}addOptions(c,ctBox);}HTML代码:

div class='content'h3下拉框联动效果/h3p省份:选择名称='省份id='省份'/选择/pp市:select name=' city s ' id=' city s '/select/p/div全部Java脚本语言代码:

var LinkDatas={省份3360[{ '代码' : ' 0 ','名称' : '请选择},{ '代码' :'1 ','名称' : '北京},{ '代码' :'2 ','名称' : '天津},{ '代码' :'3 ','名称' : '河北},{ '代码' :'4 ','名称' : '湖北},{ '代码' :'5 ','名称' : '广东},{ '代码' :'6 ','名称' : '其他}],citys:{0:['请选择'],1:['朝阳区','海淀区','东城区','西城区','房山区','其他'],2:['天津'],3:['沧州','石家庄','秦皇岛','其他'],4:['武汉市','宜昌市','襄樊市','其他'],5:['广州市','深圳市','汕头市','佛山市','珠海市','其他'],6:['其他']}};函数addOptions(target,options){var optionEle=null,target=target,option=options,option len=options . length for(var I=0;我选项;I){选项ele=文档。创建元素('选项');optionEle.value=option[i].价值;optionEle.text=option[i].文本;目标。选项。添加(选项ele);} }功能省份scitylink(pro,c){var LD=linkDatas,省份=LD。省份,城市=LD.citys,initCity=city[0],ProBox=[];/*添加省份*/for(var I=0;一。省份。长度;i ){proBox.push({'text' :省份[i].名,'值':个省[i].code})} addOptions(pro,ProBox);/*初始化城市*/addOptions(c,[{'text' : initCity,' value ' : init city }]);/*添加联动事件*/pro。onchange=function(){ console。日志(这个);var ct=city[this.value],ctLen=ct.length,ctBox=[];c.innerHTML=/*添加城市*/for(var j=0;j ctLenj){ ctbox。push({ ' text ' : CT[j],' value ' : CT[j]});}addOptions(c,ctBox);}}var省份=document.getElementById('省份),城市s=文档。getelementbyid(' city s ');省市链接(省、市);

更多资讯
游戏推荐
更多+