JavaScript省市级联下拉菜单实例
作者:梵音与笙 时间:2024-04-10 16:18:18
最近学了一个关于省市级联简单的小例子,贴出来与大家分享一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
<option>请选择省份</option>
</select>
<select id="selCity">
<option>请选择城市</option>
</select>
<script>
function $(ID){
return document.getElementById(ID);
}
var cityList=new Array();
cityList['北京市']=['东城区','西城区','昌平区'];
cityList['河北省']=['保定','石家庄','定州'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市'];
function changeCity(){
var province=$("selProvince").value;
var city=$("selCity");
city.options.length=0;
for (var i in cityList) {
if(i==province){
for (var j in cityList[i]) {
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}
}
}
function allCity(){
var province=$("selProvince");
for (var i in cityList) {
province.add(new Option(i,i),null);
}
}
window.onload=allCity;
</script>
</body>
</html>
标签:js,省市级联
0
投稿
猜你喜欢
解决ele ui 表格表头太长问题的实现
2024-05-13 09:44:00
selenium+python自动化测试之使用webdriver操作浏览器的方法
2023-06-28 03:04:47
Python控制线程和函数超时处理
2023-12-18 05:47:48
WEB设计经验-来自Microsoft
2008-05-15 07:30:00
爬虫框架 Feapder 和 Scrapy 的对比分析
2022-03-31 00:02:17
Python 照片人物背景替换的实现方法
2021-10-21 08:45:02
python中文分词,使用结巴分词对python进行分词(实例讲解)
2023-03-15 13:37:30
详解Google Protobuf简明教程
2023-08-17 14:47:28
PyCharm中关于安装第三方包的三个建议
2022-03-25 20:08:41
PHP使用CURL实现多线程抓取网页
2024-06-05 09:48:25
Python神经网络TensorFlow基于CNN卷积识别手写数字
2022-06-18 20:23:00
Python ZipFile模块详解
2021-09-17 06:30:24
对python 中re.sub,replace(),strip()的区别详解
2022-07-17 21:33:03
python机器学习实现决策树
2021-04-21 07:44:34
js style动态设置table高度
2024-02-23 23:23:05
在django中使用post方法时,需要增加csrftoken的例子
2023-08-12 06:44:34
php基于PDO实现功能强大的MYSQL封装类实例
2023-11-16 22:50:27
简单学习Python time模块
2021-04-24 00:18:53
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2022-06-11 15:58:50
超详细,教你用python语言实现QQ机器人制作教程
2023-10-05 10:12:53