JavaScript实现省市县 * 级联特效
作者:Cheny0815 时间:2024-04-18 10:55:56
本文实例为大家分享了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, , 级联
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
pyqt5 使用cv2 显示图片,摄像头的实例
2023-09-28 10:33:24
python识别图像并提取文字的实现方法
2023-06-07 18:36:36
![](https://img.aspxhome.com/file/2023/3/85383_0s.jpg)
mysql 一个较特殊的问题:You can't specify target table 'wms_cabinet_form'
2024-01-24 19:07:13
python神经网络tensorflow利用训练好的模型进行预测
2022-09-27 17:33:17
![](https://img.aspxhome.com/file/2023/9/123459_0s.png)
python读取指定字节长度的文本方法
2022-04-17 10:42:45
Python中字符串List按照长度排序
2023-11-28 21:43:02
MySQL与MSSQl使用While语句循环生成测试数据的代码
2024-01-22 01:42:47
SQL语句实例说明 方便学习mysql的朋友
2024-01-22 19:48:50
如何使用Python修改matplotlib.pyplot.colorbar的位置以对齐主图
2021-09-28 18:01:30
![](https://img.aspxhome.com/file/2023/3/118573_0s.png)
跟老齐学Python之复习if语句
2022-03-20 19:33:20
超详细汇总21个值得收藏的mysql优化实践
2024-01-17 21:01:18
![](https://img.aspxhome.com/file/2023/8/70448_0s.png)
解决vue组件中click事件失效的问题
2023-07-02 16:34:10
![](https://img.aspxhome.com/file/2023/4/139714_0s.jpg)
python飞机大战游戏实例讲解
2021-12-07 14:43:26
![](https://img.aspxhome.com/file/2023/7/109467_0s.png)
在Django的视图中使用数据库查询的方法
2024-01-14 20:03:20
PHP小白必须要知道的php基础知识(超实用)
2024-05-13 09:56:42
![](https://img.aspxhome.com/file/2023/4/126224_0s.png)
django配置app中的静态文件步骤
2021-03-15 21:43:57
Python字符串str超详细详解(适合新手!)
2021-06-26 02:48:00
![](https://img.aspxhome.com/file/2023/0/76060_0s.jpg)
PHP iconv 解决utf-8和gb2312编码转换问题
2024-04-29 13:56:58
Go语言高效编程的3个技巧总结
2024-02-03 02:52:38
Python3学习urllib的使用方法示例
2021-09-23 00:08:08