js实现简单的省市县三级联动效果实例
本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考,具体如下:
js代码部分
//省市县数据格式 varprovince_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县","南部县","营山县"] } ] }, { province:"北京", city:[ {cityName:"北京市", county:["东城区","朝阳区"] } ] }, { province:"安徽", city:[ {cityName:"安庆", county:["安庆市","怀宁县","潜山县"] }, {cityName:"蚌埠", county:["蚌埠市","固镇县","怀远县"] } ] } ] varopt0=["省份","地级市","市、县级市、县"]; varselectID_arr2=["provinceid","cityid","countyid"]; varprovince_index; window.onload=function(){ //初始化下拉框 functioninit_select(){ init_title(); init_province(); bind_province(); } //初始化提示标题 functioninit_title(){ for(vark=0;k<selectID_arr2.length;k++){ varselect_obj=document.getElementById(selectID_arr2[k]); select_obj.options[0]=newOption(opt0[k],opt0[k]); } } //初始化省份 functioninit_province(){ varprovince_select_obj=document.getElementById(selectID_arr2[0]); varprovince_len=province_city_county_data.length; for(vari=0;i<province_len;i++){ province_select_obj.options[i+1]=newOption(province_city_county_data[i].province,province_city_county_data[i].province); } } //给省份绑定onchange事件 functionbind_province(){ varprovince_select_obj=document.getElementById(selectID_arr2[0]); province_select_obj.onchange=function(){ varopt_index=province_select_obj.selectedIndex; if(opt_index!=0){ province_index=opt_index-1;//每个省份的序号比option的下标要小1 init_city(province_index); bind_city(); init_county(province_index,0); }else{ clear_city(); clear_county(); } } } //选择一个省份才能初始化地级市 functioninit_city(index){ clear_city(); varcity_len=province_city_county_data[index].city.length; for(vari=0;i<city_len;i++){ document.getElementById(selectID_arr2[1]).options[i+1]=newOption(province_city_county_data[index].city[i].cityName,province_city_county_data[index].city[i].cityName); } document.getElementById(selectID_arr2[1]).options[1].selected=true; } //清除地级市信息 functionclear_city(){ varcity_select_obj=document.getElementById(selectID_arr2[1]); city_select_obj.options.length=0;//每次选中一个新的省份都重新删除地级市的信息 init_title();//重新初始化标题 } //给地级市绑定onchange事件 functionbind_city(){ varcity_select_obj=document.getElementById(selectID_arr2[1]); city_select_obj.onchange=function(){ varopt_index=city_select_obj.selectedIndex; if(opt_index!=0){ init_county(province_index,opt_index-1); }else{ clear_county(); } } } //选择一个地级市后才能初始化县 functioninit_county(index,city_index){ clear_county(); varcounty_len=province_city_county_data[index].city[city_index].county.length; for(vari=0;i<county_len;i++){ document.getElementById(selectID_arr2[2]).options[i+1]=newOption(province_city_county_data[index].city[city_index].county[i],province_city_county_data[index].city[city_index].county[i]); } document.getElementById(selectID_arr2[2]).options[1].selected=true; } //清除县城信息 functionclear_county(){ varcounty_select_obj=document.getElementById(selectID_arr2[2]); county_select_obj.options.length=0;//每次选中一个新的地级市都重新删除县的信息 init_title();//重新初始化标题 } init_select() }
html部分
<selectid="provinceid"></select> <selectid="cityid"></select> <selectid="countyid"></select>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。