本文实例为大家分享了js省市县三级级联特效的实现代码,供大家参考,具体内容如下
主要思想
1.省改变,市改变,并初始化县
2.市改变,县改变
html代码
<select id="sheng"> <option value="">--请选择--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option> <option value="3">内蒙古自治区</option> </select> <select id="shi"> <option value="">--请选择--</option> </select> <select id="xian"> <option value="">--请选择--</option> </select>
主要步骤
1.获取元素对象
var sheng = document.getElementById('sheng'); var shi = document.getElementById('shi'); var xian = document.getElementById('xian');
2.定义市和县的数组
var city = [ ['昌平区', '海淀区', '朝阳区', '东城区'], ['石家庄市', '保定市', '张家口市', '唐山市'], ['太原市', '大同市', '运城市', '临汾市'], ['呼和浩特市', '包头市', '鄂尔多斯市', '赤峰市'] ]; var xians = [ [ ['北七家','回龙观','霍营'], ['中关村','苏州街','西二旗'], ['朝阳1','朝阳2','朝阳3'], ['东城1','东城2','东城3'], ], [ ['新华区','桥东区','桥西区'], ['高碑店','白沟','定兴'], ] ];
3.定义全局变量
var index = null;
4.实现省份改变,市跟着变化的效果
sheng.onchange = function() { xian.innerHTML = '<option value="">--请选择--</option>';// 初始化xian index = this.value; // 获取option的值 var result = city[index];//根据index去city数组中获取对应的shi // 将获取的结果显示在select#shi中,循环result数组中的"每一个值",在值的两侧加上option标签 var str = '<option value="">--请选择--</option>'; for (var i = 0; i < result.length; i++) { // 将所有的拼接好的市再次拼接为一个整体 str += '<option value="'+i+'">' + result[i] + '</option>'; } shi.innerHTML = str;//将字符串写入到select#shi中 }
5.实现市改变,获取县城的效果
shi.onchange = function(){ var value = this.value; // 获取当前的value值 var county = xians[index][value]; // 根据市获取市对应的县 var str = '<option value="">--请选择--</option>'; for (var i = 0; i < county.length; i++) { str += '<option value="'+i+'">' + county[i] + '</option>'; } xian.innerHTML = str;//将数据写入到select#xian中 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,省市县,三级级联
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript实现省市县三级级联特效”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
2024年10月06日
2024年10月06日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]