<!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. unity 根据平板 或者 手机 确立横竖屏

    /* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...

  2. linux下编译时遇到fatal error: openssl/sha.h: No such file or directory怎么办?

    答:安装ssl开发库 ubuntu下的安装方法为: sudo apt-get install libssl-dev -y

  3. 三、原子变量与CAS算法

    原子变量:jdk1.5 后 java.util.concurrent.atomic 包下提供了常用的原子变量: - AtomicBoolean - AtomicInteger - AtomicLong ...

  4. C、C++中的static和extern关键字

    1.首先,关于声明和定义的区别 这种写法(函数原型后加;号表示结束的写法)只能叫函数声明而不能叫函数定义,只有带函数体的声明才叫定义,比如下面 只有分配存储空间的变量声明才叫变量定义,其实函数也是一样 ...

  5. vue--简化项目逻辑属性

    computed属性对数据变化是实时响应的 因此当项目中某个数值发生变化,并且要在别的地方引用这个数值时,computed即可派上用场 来看一个例子: html部分: <div id=" ...

  6. Keras + LSTM 做回归demo

    学习神经网络 想拿lstm 做回归, 网上找demo 基本三种: sin拟合cos 那个, 比特币价格预测(我用相同的代码和数据没有跑成功, 我太菜了)和keras 的一个例子 我基于keras 那个 ...

  7. R语言并行运算示例 parallel 包

    library(parallel)#example 1cl <- makeCluster(getOption("cl.cores", 2))clusterApply(cl, ...

  8. react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  9. sublime text3使用

    设置tab键为若干空格 { "tab_size": 4, "translate_tabs_to_spaces": true }

  10. ggplot的boxplot添加显著性 | Add P-values and Significance Levels to ggplots | 方差分析

    参考:Add P-values and Significance Levels toggplots 多组比较,挑选感兴趣的显示显著性. data("ToothGrowth") he ...