使用JavaScript数组实现省份和城市的级联菜单
2024-08-25 01:04:06
查看本章节
查看作业目录
需求说明:
使用数组实现省份和城市的级联菜单。具体要求如下
- 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市
- 页面加载完毕后,第一个列表框填充“两湖两广”(湖北、湖南、广东和广西)省份,第二个列表框填充第一个省份的所有城市
- 当选择省份时,如“湖北省”,第二个下拉列表框先清除选项,然后再填充“湖北省”的所有城市
实现思路:
- 在脚本中,声明一个省份数组和一个使用文字作为数组元素下标的全局数组变量,用来存储省份和城市
- 声明函数initProvince(),在第一个列表框中填充所有的省份名称
- 声明函数fillCity(),把在第一个列表框中选择的省份所对应的城市填充到第二个列表框中
- 在window 的onload 事件中绑定initProvince() 方法和fillCity() 方法 给第一个列表框<select> 标签的onchange 事件绑定fillCity() 方法
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var provinces=new Array('湖北省','湖南省','广东省','广西省');
var citys=new Array();
citys['湖北省']=['武汉','黄石','宜昌','襄阳','孝感','黄冈'];
citys['湖南省']=['长沙','衡阳','岳阳','常德','张家界','怀化'];
citys['广东省']=['广州','深圳','珠海','汕头','佛山','江门'];
citys['广西省']=['南宁','桂林','北海','玉林','百色','贺州'];
function initProvince(){
var province=document.getElementById("province");
for (var i=0;i<provinces.length;i++) {
var option=document.createElement("option");
option.text=provinces[i];
option.value=provinces[i];
province.options.add(option);
}
}
function fillCity(){
var city=document.getElementById("city");
city.options.length=0;
var province=document.getElementById("province").value;
console.log(province);
console.log(citys[province]);
for (var i=0;i<citys[province].length;i++){
var option=document.createElement("option");
option.text=citys[province][i];
option.value=citys[province][i];
city.options.add(option);
}
}
window.onload=function(){
initProvince();
fillCity();
}
</script>
<h2>请选择城市<br />
省份:<select id="province" onchange="fillCity()"></select>
城市:<select id="city"></select>
</h2>
</body>
</html>
最新文章
- [spring源码学习]单元测试演化
- KVO的使用
- 我与python3擦肩而过(三)—— 我去。。又是编码问题——urllib.parse.unquote
- 关于litecoin莱特币挖矿、炒作的一点感想
- vs2013 设置为中文版
- java 菱形
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(47)-工作流设计-补充
- _CrtMemBlockHeader
- C# 大小写转换
- 【LeetCode】 Populating Next Right Pointers in Each Node 全然二叉树
- 将DataTable 存到一个集合当中
- spring启用线程空指针异常
- requests+多进程poll+pymongo实现抓取小说
- BZOJ2820:YY的GCD
- 贝叶斯优化(Bayesian Optimization)深入理解
- ubuntu安装jupyter 并设置远程访问
- linux yum配置本地iso镜像
- 重写NLog
- (01背包 先排序)Proud Merchants (hdu 3466)
- vector容器的用法以及动态数组
热门文章
- 隐藏状态栏后tableview自动上移20个像素的问题
- Windows服务器java.exe占用CPU过高问题分析及解决
- 从orderby引发的SQL注入问题的思考
- Nginx安全检查
- [BUUCTF]PWN——[Black Watch 入群题]PWN
- 嵌入式实验一:LED灯点亮
- java 多线程 读写互斥锁ReentrantReadWriteLock:读读不互斥,读写互斥,写写互斥
- 13 - Vue3 UI Framework - 完善官网
- 使用docker自定义oraclejdk启动jar包
- Spring Boot整合Thymeleaf及Thymeleaf页面基本语法