<!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. HTML与CSS的一些知识（四）

    续: line-height 用于设置一行文本行高,一般用于文本的垂直居中: display 用于设置元素的显示方式 float 浮动,让元素漂浮起来排列 浮动的影响: a.浮动后,行内元素可以支持宽 ...

  2. 用Tensorflow实现DCGAN

    1. GAN简介 最近几年,深度神经网络在图像识别.语音识别以及自然语言处理方面的应用有了爆炸式的增长,并且都达到了极高的准确率,某些方面甚至超过了人类的表现.然而人类的能力远超出图像识别和语音识别的 ...

  3. centOS 及 ubuntu 下载地址记录

    CentOS下载地址:   http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso  : ubu ...

  4. html 的 crossorigin 属性

    添加这个属性, 并且服务器允许跨域后,会得到精确的报错信息. 添加这个属性,但服务器不允许跨域,就会被同源策略阻止加载资源. 不添加这个属性,只能知道报错,不知道具体信息. https://www.j ...

  5. 微信支付之App支付

    项目接入微信支付的准备工作: 注册成为开发者,进行资质认证,这里是需要300元的审核费用的: 在微信商户平台创建应用,提交等待审核(大致需要5-7个工作日): 应用审核通过之后,进入应用,开通微信支付 ...

  6. 20190323——HeadFirestPython学习之异常处理

    man=[] other=[] try: data=open('sketch.txt') for each_line in data: try: (role,line_spoken)=each_lin ...

  7. cryptoJS

    CryptoJS通俗的来讲是为了安全性,将前端传递到后端的参数加密 加密/解密方法(对称加密算法) AES 高级加密标准,是下一代的加密算法标准,速度快,安全级别高 DES 数据加密标准,适用于大量数 ...

  8. restore not found的错误(问题2)

    最近在写gan,那么就牵扯到在一个session中加载两个图,restore的时候会有问题.如这篇文章写的(http://blog.csdn.net/u014659656/article/detail ...

  9. font——文字属性大全

    一.字体风格(font-style) <style type="text/css"> /*默认值.浏览器显示一个标准的字体样式.*/ p.normal {font-st ...

  10. sql语句学习及索引学习，未完待续，补充增删改查

    1,查询出last_name 为 'Chen' 的 manager 的信息.  select * fromwhere employee_id = ( selectfrom employees wher ...