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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
js尾调用优化的实现
2019/05/23 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
集团薪酬管理制度
2014/01/13 职场文书
班班通校本培训方案
2014/03/12 职场文书
项目经理聘任书
2014/03/29 职场文书
滞留工资返还协议书
2014/10/19 职场文书
民事起诉书范本
2015/05/19 职场文书
房贷收入证明范本
2015/06/12 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python