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公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
javascript实现下雨效果
Mar 27 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
vue实现户籍管理系统
May 29 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python实现的下载网页源码功能示例
2017/06/13 Python
Python可迭代对象操作示例
2019/05/07 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
银行学习十八大感想
2014/01/11 职场文书
新年团拜会主持词
2014/04/02 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
农村文化活动总结
2014/08/28 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
加薪申请报告范本
2015/05/15 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Python简易开发之制作计算器
2022/04/28 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技