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 相关文章推荐
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
从0开始学Vue
Oct 27 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
改进的IP计数器
2006/10/09 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JsRender实用入门教程
2014/10/31 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
经典C++面试题一
2016/11/06 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
员工自我鉴定
2013/10/09 职场文书
护士自荐信
2013/10/25 职场文书
消防安全责任书范本
2014/04/15 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
市场部经理岗位职责
2015/02/02 职场文书
刘胡兰观后感
2015/06/16 职场文书
高三化学教学反思
2016/02/22 职场文书
如何拟写通知正文?
2019/04/02 职场文书