<!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. 【做题】CSA72G - MST and Rectangles——Borůvka&线段树

    原文链接 https://www.cnblogs.com/cly-none/p/CSA72G.html 题意:有一个\(n \times n\)的矩阵\(A\),\(m\)次操作,每次在\(A\)上三 ...

  2. 何给域名配置https证书

    原文链接:https://www.cnblogs.com/ymwang/p/6893105.html http和https的区别就是,后者在网络传输过程中会很安全,原因就是给http安装了SSL证书. ...

  3. 解决Ubuntu无法通过ssh远程登录问题

    1.  安装 open ssh: sudo apt-get install ssh sudo apt-get install openssh-server 2. 编辑配置文件,允许以 root 用户通 ...

  4. Mybatis学习之一

    mybatis是目前市面上最流行的ORM框架之一,作为JavaEE程序员,在工作中不可能不用到mybatis.所以为了工作,为了学习,为了个人的发展,每个JavaEE程序员都要学习,学会mybatis ...

  5. VBoxManage

    虚拟机名称 centos6.9-1 centos6.9-2 centos6.9-3 使用命令开机 虚拟机 VBoxManage startvm 'centos6.9-1' 正常启动 VBoxManag ...

  6. ios高级开发之多线程(二）NSThread技术

    多线程技术是有多套解决方案的,那么我们该如何选择呢? 技术方案 简介 语言 线程生命周期 使用频率 pthread 1.一套通用的多线程API 2.适用于UNIX,linux,windows等 3.跨 ...

  7. python 写文本文件出现乱码

    最近工作中想完善一下监控日志,同事说客户突然说我们最近几天推送的数据只有几家,赶紧看预警,应推4700多家,实推3400多家,用户可能是看错了,但我记得当时项目验收上线时,这个来源的推送数据肯定是可以 ...

  8. MVC与MVVM关系图解

  9. MongoVUE的table view视图不显示列标题

    近来项目用到mongodb,遂装了个MongoVUE,当然是破解版的. 但是发现个小问题,就是table view视图下列标题文字标签不见了,Find的执行按钮也是空白一片: 开始以为破解的不彻底,重 ...

  10. 微信小程序如何使用iconfont阿里巴巴图标库？

    步骤: 1.如图先下载:  2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...