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 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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采集时被封ip的解决方法
2010/08/29 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
php函数式编程简单示例
2019/08/08 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python PO设计模式的具体使用
2019/08/16 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
军训 自我鉴定
2014/02/03 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
擅自离岗检讨书
2014/09/12 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
门面房租房协议书
2014/12/01 职场文书
怒海潜将观后感
2015/06/11 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript