<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>省市级联动</title>

		<script>

			//1.定义一个二维数组存储省市信息

			var city = new Array(3);

			city[0] = new Array("长沙市","株洲市","湘潭市","衡阳市","岳阳市","常德市","张家界市","郴州市","永州市","邵阳市","娄底市","怀化市","益阳市","湘西土家图苗族自治州");

			city[1] = new Array("武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","天门市");

			city[2] = new Array("黄浦区","卢湾区","徐汇区","长宁区","金山区","虹口区");

			city[3] = new Array("广东市","深圳市","珠海市","清远市");

			//2.将所选的省和数组中的省进行匹配

			function changeCity(val) {

				//6.获取下一个select节点

				var selectNode = document.getElementById("cities");

				//	alert("111");

				//8.在每次重新选择后，将第二个下拉框中的数据清除。

				selectNode.length = 0;

				for(var i = 0;i<city.length;i++) {

					if(val == i) {

						for(var j =0;j<city[i].length;j++){

							//3.创建option节点

							var opNode = document.createElement("option");

							//4.创建文本节点

							var cityNode = document.createTextNode(city[i][j]);

							//5.将文本节点加入option节点中

							opNode.appendChild(cityNode);

							//alert(opNode.value);

							//7.将option节点加入select节点中

							selectNode.appendChild(opNode);

						}

					}

				}

			}

		</script>

	</head>

	<body>

		籍贯

		<select onchange = "changeCity(this.value)">

			<option >--请选择--</option>

			<option value="0">湖南</option>

			<option value="1">湖北</option>

			<option value="2">上海</option>

			<option value="3">广东</option>

		</select>

		<select id="cities">

		</select>

	</body>

</html>

JS案例六_2：省市级联动的更多相关文章

  1. JS案例六_1:添加城市

    使用的相关知识点:对子节点的添加:document.appendClild() 文本节点的创建:document.createTextNode() 元素节点的创建:document.createEle ...

  2. WPF案例 (六) 动态切换UI布局

    原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...

  3. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

  4. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  5. JavaScript案例六：简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  6. JS案例 - 城市三级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 全国城市3级联动

    js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ ...

  8. js 实现全国省市区三级联动

    效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  9. JS案例经验二

    一 关键词:鼠标事件的触发 可以在函数中指定让鼠标事件自动触发,而不是必须要鼠标滑过才触发,例如: main.onmouseover(); // 可以把该语句看做是鼠标滑过的模拟动作 main是DOM ...

随机推荐

  1. server.xml引入子文件配置（tomcat虚拟主机）

    在配置tomcat虚拟主机时候,如何每一个虚拟主机写成单独文件,server.xml包含这些子文件? 如以下<OneinStack>中,添加JAVA环境虚拟主机后tomcat配置文件详情: ...

  2. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. Web 端异步下载文件

    Web 端异步下载文件 实现文件异步下载: 在服务端无法返回文件,或发生异常时给予提示. JavaScript: 服务端返回的JSON对象形如: { code:200, msg:'下载成功|未找到指定 ...

  4. Elasticsearch .net client NEST 5.x 使用总结

    目录: Elasticsearch .net client NEST 5.x 使用总结 elasticsearch_.net_client_nest2.x_到_5.x常用方法属性差异 Elastics ...

  5. [ZOJ 4020] Traffic Light

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4020 很简单的一个bfs题,是我想多了. 顺便学习一下C++的S ...

  6. [Redis] - redis实战1

    rememberMe>>>>:null Creating a new SqlSession SqlSession [org.apache.ibatis.session.defa ...

  7. vue-cli3.0 笔记

      vue-cli 3.0   npm install -g @vue/cli # OR yarn global add @vue/cli ui 界面创建项目 vue ui 命令行创建项目 步骤 vu ...

  8. 最大子段和的DP算法设计及其效率测试

    表情包形象取自番剧<猫咪日常> 那我也整一个 曾几何时,笔者是个对算法这个概念漠不关心的人,由衷地感觉它就是一种和奥数一样华而不实的存在,即便不使用任何算法的思想我一样能写出能跑的程序 直 ...

  9. Docker报错 WARNING: IPv4 forwarding is disabled. Networking will not work.

    问题:创建容器的时候报错WARNING: IPv4 forwarding is disabled. Networking will not work. # docker run -it -p 3000 ...

  10. winform使用log4.net

    因为我最近负责的Winform项目,好多都用到了这个log4net的日志功能,开发程序对数据一般都要求做到雁过留痕,所以日志对于我们程序员是不可或缺.因此我把对log4net的使用做一个记录总结,以便 ...