js实现简单的省市县三级联动效果实例

本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考，具体如下：
js代码部分

//省市县数据格式var province_city_county_data=[{province:"四川",city:[{cityName:"成都",county:["成都市","崇州市","金堂县"]},{cityName:"南充",county:["仪陇县","南部县","营山县"]}]},{province:"北京",city:[{cityName:"北京市",county:["东城区","朝阳区"]}]},{province:"安徽",city:[{cityName:"安庆",county:["安庆市","怀宁县","潜山县"]},{cityName:"蚌埠",county:["蚌埠市","固镇县","怀远县"]}]}]var opt0 = ["省份","地级市","市、县级市、县"];var selectID_arr2=["provinceid","cityid","countyid"];var province_index;window.onload = function（）{//初始化下拉框function init_select（）{init_title（）;init_province（）;bind_province（）;}//初始化提示标题function init_title（）{for（var k = 0;k<selectID_arr2.length;k++）{var select_obj= document.getElementById（selectID_arr2[k]）;select_obj.options[0]=new Option（opt0[k],opt0[k]）;}}//初始化省份function init_province（）{var province_select_obj = document.getElementById（selectID_arr2[0]）;var province_len = province_city_county_data.length;for（var i = 0;i<province_len;i++）{province_select_obj.options[i+1] = new Option（province_city_county_data[i].province,province_city_county_data[i].province）;}}//给省份绑定onchange事件function bind_province（）{var province_select_obj = document.getElementById（selectID_arr2[0]）;province_select_obj.onchange=function（）{var opt_index =province_select_obj.selectedIndex;if（opt_index！=0）{province_index = opt_index-1;//每个省份的序号比 option 的下标要小1init_city（province_index）;bind_city（）;init_county（province_index,0）;}else{clear_city（）;clear_county（）;}}}//选择一个省份才能初始化地级市function init_city（index）{clear_city（）;var city_len = province_city_county_data[index].city.length;for（var i = 0;i<city_len;i++）{document.getElementById（selectID_arr2[1]）.options[i+1] = new Option（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;}//清除地级市信息function clear_city（）{var city_select_obj = document.getElementById（selectID_arr2[1]）;city_select_obj.options.length=0; //每次选中一个新的省份 都重新删除地级市的信息init_title（）; //重新初始化标题}//给地级市绑定onchange事件function bind_city（）{var city_select_obj = document.getElementById（selectID_arr2[1]）;city_select_obj.onchange=function（）{var opt_index =city_select_obj.selectedIndex;if（opt_index！=0）{init_county（province_index,opt_index-1）;}else{clear_county（）;}}}//选择一个地级市后才能初始化县function init_county（index,city_index）{clear_county（）;var county_len = province_city_county_data[index].city[city_index].county.length;for（var i = 0;i<county_len;i++）{document.getElementById（selectID_arr2[2]）.options[i+1] = new Option（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;}//清除县城信息function clear_county（）{var county_select_obj = document.getElementById（selectID_arr2[2]）;county_select_obj.options.length=0; //每次选中一个新的地级市 都重新删除县的信息init_title（）; //重新初始化标题}init_select（）}

html部分

<select id="provinceid"></select><select id="cityid"></select><select id="countyid"></select>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。