JavaScript省市联动菜单
<!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省市联动菜单的更多相关文章
- 通过Javascript数组设计一个省市联动菜单
通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
- JavaScript省市联动
<html> <head> <title>JS省市二级联动菜单,整理收集.</title> </head> <body bgcolor ...
- 省市联动_简单的Demo，适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- JavaScript基础4——省市联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javascript 笔记与总结（2-12）联动菜单
联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- JS脚本加载与执行对性能的影响
高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...
- Asp.net网站的简单发布
概述 网站是由一个个页面组成的,是万维网具体的变现形式,关于万维网,网页的方面的理论知识,大家可以看一看这篇博客:万维网文档,在这里就不多说了.网站的发布要到达的一个目的就是,别人可以通过浏览器访问该 ...
- 发现C++Builder 2010一组类BUG
今天C++Builder 2010写小码,我们用一个集合类.您可以设置操作结果是不正确的,排除其他原因引起的,最后,它应该被设置以确定问题类的源,以下是一个集合类测试代码: enum TTes ...
- 移植kl档，但调用默认Generic.kl解决的方法
从飞机到现在移植模型来开发遥控器按键,调查发现,大部分的功能键始终没有任何效果. 跑 dumpsys input 要查看当前的关键kl, 查找KeyLayoutFile它原来是默认Generic.kl ...
- unrecognized selector sent to instance 0x10b34e810
一个错误: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSURLEr ...
- 最佳新秀SSH十六Struts2它是如何工作的内部
前面说完了Spring.Hibernate,非常自然今天轮到struts了.struts的核心原理就是通过拦截器来处理client的请求,经过拦截器一系列的处理后,再交给Action.以下先看看str ...
- 两个堆叠fragment，上层fragment响应于降低fragment的button点击事件补救措施
加入onViewCreated的Touch事件监听, 以解决叠在一起的fragment上层响应下层的button点击事件解决方法 @Override public void onViewCreated ...
- poj Firing(最大重量封闭图)
Firing 题目: 要解雇一些人,而解雇的这些人假设人跟他有上下级的关系,则跟他有关系的人也要一起解雇.每一个人都会创造一定的价值,要求你求出在最大的获利下.解雇的人最小. 算法分析: 在这之前要知 ...
- 基于Spring + Spring MVC + Mybatis 高性能web构建
基于Spring + Spring MVC + Mybatis 高性能web构建 一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJs,做了大量的研究,对前后端交互 ...
- 【Bible for kids】 儿童圣经 App
[Bible for kids] 儿童圣经App 除了<The Bible>这个由YouVersion团队开发的全球下载量和安装数目第一的圣经类.安装量已逾1亿8千万的App之外,YouV ...