<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script>

			/*

				准备工作 : 准备数据

			*/

			var provinces = [

				["深圳市","东莞市","惠州市","广州市"],

				["长沙市","岳阳市","株洲市","湘潭市"],

				["厦门市","福州市","漳州市","泉州市"]

			];

			/*

				1. 确定事件:  onchange

				2. 函数: selectProvince()

				3. 函数里面要搞事情了

					得到当前操作元素

					得到当前选中的是那一个省份

					从数组中取出对应的城市信息

					动态创建城市元素节点

					添加到城市select中

			*/

			function selectProvince(){

				var province = document.getElementById("province");

				//得到当前选中的是哪个省份

				//alert(province.value);

				var value = province.value;

				//从数组中取出对应的城市信息

				var cities = provinces[value];

				var citySelect = document.getElementById("city");

				//清空select中的option

				citySelect.options.length = 0;

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

//					alert(cities[i]);

					var cityText = cities[i];

					//动态创建城市元素节点   <option>东莞市</option>

					//创建option节点

					var option1 = document.createElement("option"); // <option></option>

					//创建城市文本节点

					var textNode = document.createTextNode(cityText) ;// 东莞市

					//将option节点和文本内容关联起来

					option1.appendChild(textNode);  //<option>东莞市</option>

//					添加到城市select中

					citySelect.appendChild(option1);

				}

			}

		</script>

	</head>

	<body>

		<!--选择省份-->

		<select οnchange="selectProvince()" id="province">

			<option value="-1">--请选择--</option>

			<option value="0">广东省</option>

			<option value="1">湖南省</option>

			<option value="2">福建省</option>

		</select>

		<!--选择城市-->

		<select id="city"></select>

	</body>

</html>

JS下拉框联动的更多相关文章

  1. 基于bootstrap-multiselect.js的下拉框联动

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法 ...

  2. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

  3. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  4. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  5. SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动

    1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

  6. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  7. js下拉框

    Js下拉框   http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html

  8. html年月日下拉联动菜单 年月日三下拉框联动

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

  9. 月薪10K必备--C#下拉框联动

                   下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

随机推荐

  1. Commons BeanUtils 中对Map的操作

    CSDN学院招募微信小程序讲师啦 程序员简历优化指南! [观点]移动原生App开发 PK HTML 5开发 云端应用征文大赛,秀绝招,赢无人机! Commons BeanUtils 中对Map的操作 ...

  2. 每个项目中，你必须知道的11个Java第三方类库。

    Java第三方library ecosystem是一个很广阔的范畴.不久前有人撰文:每个项目中,你必须知道的11个Java第三方类库. 单元测试 1.DBUnit DBunit是一个基于junit扩展 ...

  3. Day2：接着思考和可能的策划

    今天早上闹钟还没响呢,老婆就把我叫醒了~说有规律宫缩了! 7点到8点记录了一个小时,宫缩差不多5~6分钟一次! 赶紧收拾东西上医院!正好今天是40周的产检,今天还是预产期! 这孩子终于肯出来了! 结果 ...

  4. logback日志

    一.什么是日志框架? 是一套能够实现日志输出的工具包 能够描述系统运行状态的所有时间都可以算作日志 用户下线,接口超时,数据崩溃 二.日志框架的能力 1.定制输出目标(文件,回滚策略,数据库,网络的第 ...

  5. Linux 补丁 的简单使用： 制作补丁，打补丁，撤销补丁

    ​ 背景: 补丁的使用对于嵌入式开发人员来说,在维护或者开发中都比较方便. 制作补丁: diff - 逐行比较文件. 格式: diff 参数 旧文件/旧文件夹 新文件/新文件夹 (注意顺序 新旧文件夹 ...

  6. PV 动态供给【转】

    前面的例子中,我们提前创建了 PV,然后通过 PVC 申请 PV 并在 Pod 中使用,这种方式叫做静态供给(Static Provision). 与之对应的是动态供给(Dynamical Provi ...

  7. 第1节 HUE：13、hue的下载以及安装配置

    hue的基本介绍:主要是用于与其他各个框架做整合的,提供一个web界面可以供我们去操作其他的大数据框架可以理解为这个hue就是一个与其他各个框架整合的工具,hue本身不提供任何的功能,所有的功能,都是 ...

  8. 关于重定向RedirectAttributes的用法

    刚才做项目,遇到了redirectAttributes使用的问题,上网找了找,看到一篇写的很不错的博客,解决我对于RedirectAttributes的困惑,也给大家推荐下. 原文链接:href=&q ...

  9. FPGA调试技巧（Quartus 15.1 Standard平台）

    1.在SignalTap II Logic Analyzer(stp)观测信号,需要将待观察寄存器.网络节点的综合器属性设为synthesis noprune和synthesis keep,防止综合器 ...

  10. CANmonitor我自己编写的程序

    这个版本的程序, 上位机可以对电机的转速进行在线的设定,同时上位机接受电机控制器上报的母线电压,电机温度,控制器温度等. 在调试的过程中我遇见了一个问题,电机的转速的采样 . 根据协议:电机的转速为1 ...