<!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. iOS SDWebImage知识点

    1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...

  2. 类的综合运用-complex的实现

    实验要求: 定义一个复数类Complex,使得下面的代码能够工作: Complex c1(3,5);     //用复数3+5i初始化c1: Compex c2=4.5;      //用实数4.5初 ...

  3. Python中4位1进制数与float浮点数互相转换

    import struct s = 'F4CEF042' print(s) #<是小端,>是大端,f代表浮点数 print(struct.unpack('<f', bytes.fro ...

  4. Web 前端技术图谱-菜鸟教程

  5. Jenkins 改成中文语言显示

    到系统管理    插件管理中下载如下插件接口  Localization: Chinese (Simplified) 搜索的时候用ctrl+f 进行搜索,不要用Jenkins下面下的filter 只有 ...

  6. Project Euler 66: Diophantine equation

    题目链接 思路: 连分数求佩尔方程最小特解 参考博客 模板: LL a[]; bool min_pell(LL d, LL &x, LL &y) { LL m = floor(sqrt ...

  7. springboot缓存注解——@Cacheable和@CacheConfig

    @Caching :制定多个缓存规则 @Cacheable 和 @CachePut 同时标注时 ,@CachePut导致还是会走方法跟数据库交互 //根据lastName查,并将结果缓存,并且可以用于 ...

  8. 2018-2019-2 20165303《网络对抗技术》Exp2 后门原理与实践

    实验内容 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主机操作Shell, 任务计划启动 (0.5分) (3)使用MSF meterpreter( ...

  9. JSP+MySQL最简单的登录和注册的实现 --Java Web温习

    一.开发环境 开发工具:eclipse 2018-09 操作系统:win10 二.实现 1.目录结构: 2.数据库(创建tmp数据库,新建user表,user表结构如下) 3.功能简介 功能比较简单, ...

  10. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...