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

思路：

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 ')；省市链接（省、市);