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 文档碎片
Jul 13 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
实现vuex原理的示例
Oct 21 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
世界收音机发展史
2021/03/01 无线电
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
详解ES6中的let命令
2020/04/05 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python生成器generator原理及用法解析
2020/07/20 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
一年级学生评语
2014/04/23 职场文书
新教师培训方案
2014/06/08 职场文书
超市店庆活动方案
2014/08/31 职场文书
家属答谢词
2015/01/05 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
python单向链表实例详解
2022/05/25 Python