JavaScript二维数组实现的省市联动菜单


Posted in Javascript onMay 08, 2014
<!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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
JQuery基础语法小结
Feb 27 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
javascript中setTimeout的问题解决方法
May 08 #Javascript
在JavaScript中使用timer示例
May 08 #Javascript
JavaScript中读取和保存文件实例
May 08 #Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 #Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 #Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 #Javascript
addEventListener 的用法示例介绍
May 07 #Javascript
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Javascript调用C#代码
2011/01/17 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python实现简单猜单词游戏
2020/12/24 Python
经典c++面试题二
2015/08/14 面试题
公务员职业生涯规划书范文  
2014/01/19 职场文书
电子银行营销方案
2014/02/22 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年工程师工作总结
2015/04/30 职场文书
基于python实现银行管理系统
2021/04/20 Python