查看本章节

查看作业目录

需求说明：

使用数组实现省份和城市的级联菜单。具体要求如下

  • 在页面中添加城市时，根据选择的省份，动态地添加该省份的城市
  • 页面加载完毕后，第一个列表框填充“两湖两广”（湖北、湖南、广东和广西）省份，第二个列表框填充第一个省份的所有城市
  • 当选择省份时，如“湖北省”，第二个下拉列表框先清除选项，然后再填充“湖北省”的所有城市

实现思路：

  1. 在脚本中，声明一个省份数组和一个使用文字作为数组元素下标的全局数组变量，用来存储省份和城市
  2. 声明函数initProvince()，在第一个列表框中填充所有的省份名称
  3. 声明函数fillCity()，把在第一个列表框中选择的省份所对应的城市填充到第二个列表框中
  4. 在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>

使用JavaScript数组实现省份和城市的级联菜单的更多相关文章

  1. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  3. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  4. javascript之DOM编程实现城市的联动框

    需求;用一张图片表示. 分析: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  6. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  7. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...

  8. Java使用纯真IP库获取IP对应省份和城市

    原文:http://blog.csdn.net/chwshuang/article/details/78027873?locationNum=10&fps=1 Java使用纯真IP库获取IP对 ...

  9. android读取xml文件来实现省份，城市，区的选择

    本博客如需转载.请注明出处. ------------------------------------------------------------------------------------- ...

随机推荐

  1. 【编程思想】【设计模式】【基础模式Fundamental】delegation_pattern

    Python版 https://github.com/faif/python-patterns/blob/master/fundamental/delegation_pattern.py #!/usr ...

  2. maven根据profile，resources，filters来区分部署环境

    项目过程中,在不同的阶段,分别需要部署开发环境,测试环境,线上环境.如果都用一套配置文件,很容易弄乱,所以维持多套配置文件很有必要. maven提供了一组属性以供开发人员灵活搭配,可以根据环境来打包, ...

  3. Spring Boot，Spring Cloud，Spring Cloud Alibaba 版本选择说明以及整理归纳

    前言 本文的核心目的: 1.方便自己以后的查找,预览,参考 2.帮助那些不知道如何选择版本的朋友进行指引,而不是一味的跟风网上的版本,照抄. Spring Boot 版本 版本查询: https:// ...

  4. CDN服务的含义

    CDN的全称是Content Delivery Network,即内容分发网络.CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全 ...

  5. 【力扣】123. 买卖股票的最佳时机 III

    给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的 ...

  6. Jenkins多分支构建

    目录 一.创建多分支pipeline 二.根据分支部署 gitlab触发与多分支 Generic Webhook多分支 一.创建多分支pipeline 在实际中,需要多分支同时进行开发.如果每个分支都 ...

  7. react原理分析--this.state修改引起的重新渲染

    整理向,非原创,目的是整理出浅显易懂的方向性说明. 比如现有 this.state={name:"小明",age:18} 我们说修改组件的状态要用this.setState()来实 ...

  8. 自定义 UITableViewCell 的 accessory 样式

    对于 UITableViewCell 而言,其 accessoryType属性有4种取值: UITableViewCellAccessoryNone, UITableViewCellAccessory ...

  9. <转>libevent使用demo

    这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序阻塞在socket I/O操作上造成程序性能的下降,需要使用异步编程,即程序准备好读写的 ...

  10. pf4j及pf4j-spring

    什么是PF4J 一个插件框架,用于实现插件的动态加载,支持的插件格式(zip.jar). 核心组件 Plugin:是所有插件类型的基类.每个插件都被加载到一个单独的类加载器中以避免冲突. Plugin ...