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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 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 socke 向指定页面提交数据
2008/07/23 PHP
jQuery 源码分析笔记
2011/05/25 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
社区科普工作方案
2014/06/03 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
企业法律事务工作总结
2015/08/11 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL