<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

//初始化一个二维数组存储城市列表项

var cities=[

           ["安庆","合肥","桐城"],

           ["石家庄","保定","唐山"],

           ["郑州","洛阳","开封"]

           ];

//选中某个省份时候。调用加入城市的方法

function provinceChanged(sel){

	//alert("select的长度"+sel.options.length);

	//sel事实上就是select对象

	//遍历options集合，查找选中的选项

	for(var x=0;x<sel.options.length;x++)

		{

		var opt=sel.options[x];

		if(opt.selected)

			{

			//给被选择的城市的select 加入option

			addCityToSelect(x)

			}

		}

}

//加入选中省份下的城市项到city的select中

function addCityToSelect(x){

	//从二维数组中找出相应的城市

	var city=cities[x-1];

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

	/*==================删除节点中已经存在的元素===============

	在第二次或第n次调用方法的时候城市select对象中已经加入了之前加入的节点，所以有清空。

思路1：select对象的removeChild(),所以通过循环遍历能够删除字节点。

	思路2：直接设置select.options.length=1能够实现同样效果。

	*/

	//设置城市的select对象下的options长度为1

	citySelect.options.length=1;

	//设置options集合的长度，删除

	//citySelect.options.length=1;

	for(var x=0;x<city.length;x++)

		{

		//创建元素节点对象

		var optionName=document.createElement("option");

		//给option设置显示内容

		optionName.innerHTML=city[x];

		//将创建的option加入到select

		citySelect.appendChild(optionName);

		/*

		在这个地方将某一个省份以下的全部城市加入到citySelect对象以下以后

		当第二次选择第二个省份的时候。第二个省份的以下的全部城市有会被追加到

		citySelect节点以下。这种效果就错了。

所以要求在每次加入之前，要

		对citySelect节点以下的内容进行清空。接着看：

		==================删除节点中已经存在的元素===============

		*/

		}

}

</script>

</head>

<body>

<select onchange="provinceChanged(this);">

<!--this的含义：是指select对象调用provinceChanged(this),而且在此方法中

把对象本身作为參数传递，以便对其进行操作。

-->

<option>请选择省份</option>

<option>安徽</option>

<option>河北</option>

<option>河南</option>

</select>

<select id="select_city">

<option>请选择城市</option>

</select>

</body>

</html>

JavaScript省市联动菜单的更多相关文章

  1. 通过Javascript数组设计一个省市联动菜单

    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...

  2. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  3. JavaScript省市联动

    <html> <head> <title>JS省市二级联动菜单,整理收集.</title> </head> <body bgcolor ...

  4. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  5. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. JavaScript基础4——省市联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Javascript 笔记与总结（2-12）联动菜单

    联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. SecureCRT 6.7.1 注冊机 和谐 破解 补丁 方法

    之前一直在用SecureCRT 6.5.3 版本号,和谐补丁也好找,甚至中文版本号也可找到(眼下仅仅找到了SecureCRT.6.2.0) 可是换为 6.7.1 后就怎么也注冊不了了.. 没办法试了各 ...

  2. OCP-1Z0-051-名称解析-文章7称号

    7. Which two  statements are true regarding the USING and ON clauses in table joins? (Choose two.) A ...

  3. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

  4. 关于AIX lv 4k offset问题初步了解

    关于这个问题我们首先来看一下AIX的vg的3种类型: original vg 普通卷组 big vg 大卷组 scalable vg 动态的或者可扩展的卷组 如何快速区分这三组卷组呢? 通过其参数MA ...

  5. Vue.js学习与理解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不 ...

  6. sql server 远程

    资讯 |  安全 |  论坛 |  下载 |  读书 |  程序开发 |  数据库 |  系统 |  网络 |  电子书 |  站长学院 |  源码 |  QQ |  专栏 |  考试 |  手册 | ...

  7. 说说UI设计

    近期的项目验收中,无数次的提到了UI的设计,首先来说说为什么UI设计如此重要. 对于用户来说产品的外观是最先映入眼帘的,无论你用了什么高端的技术,无论你后台代码封装的多么好,用户是无法体会到的,能体会 ...

  8. Eclipse中为什么创建DynamicWebProject后没有默认的web.xml文件？

    在Eclipse中新建DynamicWebProject的时候不要直接点"完毕",在下一步有个勾选项(Generate web.xml deployment descriptor) ...

  9. MYSQL，innodb_buffer_pool_size内存分配

    为MYSQL.innodb_buffer_pool_size=8G.MySQL一起动就会将占用掉8G内存(觉得TOP能够看到内存被使用了8G),可是近期才细致研究一下.原来不是这种(可能自己对Linu ...

  10. 在深入分析：Android在app之间的相互作用(一个，使用Action)

    我们开发Android App时间应用,有些需求,我们需要启动另一App为了应对一些逻辑.例如,我们需要映射基于地址调用系统或相关Map App,所以,我们不自己有App在相应的功能的制备.而是通过I ...