JavaScript实现省市县三级级联特效
本文实例为大家分享了js省市县三级级联特效的实现代码,供大家参考,具体内容如下
主要思想
1.省改变,市改变,并初始化县
2.市改变,县改变
html代码
--请选择-- 北京市 河北省 山西省 内蒙古自治区 --请选择-- --请选择--
主要步骤
1.获取元素对象
varsheng=document.getElementById('sheng'); varshi=document.getElementById('shi'); varxian=document.getElementById('xian');
2.定义市和县的数组
varcity=[ ['昌平区','海淀区','朝阳区','东城区'], ['石家庄市','保定市','张家口市','唐山市'], ['太原市','大同市','运城市','临汾市'], ['呼和浩特市','包头市','鄂尔多斯市','赤峰市'] ]; varxians=[ [ ['北七家','回龙观','霍营'], ['中关村','苏州街','西二旗'], ['朝阳1','朝阳2','朝阳3'], ['东城1','东城2','东城3'], ], [ ['新华区','桥东区','桥西区'], ['高碑店','白沟','定兴'], ] ];
3.定义全局变量
varindex=null;
4.实现省份改变,市跟着变化的效果
sheng.onchange=function(){ xian.innerHTML='--请选择--';//初始化xian index=this.value;//获取option的值 varresult=city[index];//根据index去city数组中获取对应的shi //将获取的结果显示在select#shi中,循环result数组中的"每一个值",在值的两侧加上option标签 varstr=' --请选择--'; for(vari=0;i '+result[i]+''; } shi.innerHTML=str;//将字符串写入到select#shi中 }
5.实现市改变,获取县城的效果
shi.onchange=function(){ varvalue=this.value;//获取当前的value值 varcounty=xians[index][value];//根据市获取市对应的县 varstr='--请选择--'; for(vari=0;i '+county[i]+''; } xian.innerHTML=str;//将数据写入到select#xian中 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。