JavaScript实现级联菜单的方法


Posted in Javascript onJune 29, 2015

本文实例讲述了JavaScript实现级联菜单的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
 <title>test</title>
 <script type="text/javascript">
  function f()
  {
   var sel=document.getElementById("country");
   var sel2=document.getElementById("city");
   var cnarr1=new Array("bj","sh")
   var cnarr2=new Array("beijing","shanghai")
   var usaarr1=new Array("dc","ny")
   var usaarr2=new Array("Washington","NewYork")
   for(var i=sel2.length;i>=0;i--){
    sel2.removeChild(sel2.childNodes[i]);
   }
   var op=document.createElement("option");
   op.value="please";
   op.text="please";
   sel2.appendChild(op);
   if(sel.value=='USA'){
    for(i=0;i<2;i++){ 
     op.value=usaarr1[i];
     op.text=usaarr2[i];
     sel2.appendChild(op);
    }
   }
   else if(sel.value=='CN'){
    for(i=0;i<2;i++){ 
     op.value=cnarr1[i];
     op.text=cnarr2[i];
     sel2.appendChild(op);
    }
   }
  }
 </script>
</head>
<body>
<select onchange="f()" id='country'>
 <option >please</option>
 <option value='USA'>America</option>
 <option value='CN'>China</option>
</select>
<select id='city'>
 <option >please</option>
</select>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
node.js读取文件到字符串的方法
Jun 29 #Javascript
JavaScript模拟实现键盘打字效果
Jun 29 #Javascript
JavaScript实现把数字转换成中文
Jun 29 #Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 #Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 #Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 #Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
优化PHP程序的方法小结
2012/02/23 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
python用插值法绘制平滑曲线
2021/02/19 Python
django之自定义软删除Model的方法
2019/08/14 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
保护环境建议书
2014/03/12 职场文书
世界地球日活动总结
2015/02/09 职场文书
开票员岗位职责
2015/02/12 职场文书
资金申请报告范文
2015/05/14 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
详解Laravel制作API接口
2021/05/31 PHP
go goroutine 怎样进行错误处理
2021/07/16 Golang