相思资源网 Design By www.200059.com
本文实例讲述了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 的下标要小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部分
<select id="provinceid"></select> <select id="cityid"></select> <select id="countyid"></select>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript扩展技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript数学运算用法总结》及《javascript面向对象入门教程》
希望本文所述对大家JavaScript程序设计有所帮助。
标签:
js,省市县,三级联动
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无js实现简单的省市县三级联动效果实例的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。