js实现简单的省市县三级联动效果实例
内容摘要
本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考,具体如下:
js代码部分
//省市县数据格式
var province_city_county_data=[
{
province:"四川"
js代码部分
//省市县数据格式
var province_city_county_data=[
{
province:"四川"
文章正文
本文实例讲述了js实现简单的省市县三级联动效果。分享给大家供大家参考,具体如下:
js代码部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | //省市县数据格式 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 的下标要小1 init_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部分
1 2 3 | <select id= "provinceid" ></select> <select id= "cityid" ></select> <select id= "countyid" ></select> |
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。
代码注释