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实现的简单拖拽效果
Jun 01 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
浅谈Python中的私有变量
2018/02/28 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
int在python中的含义以及用法
2019/06/27 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
求职简历自荐信
2013/10/20 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
检讨书1000字
2014/10/11 职场文书
2014年学前班工作总结
2014/12/08 职场文书
地雷战观后感
2015/06/09 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏