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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
详解element-ui中form验证杂记
Mar 04 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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
QQ登录简单实现代码
2021/03/09 Javascript
JS代码格式化和语法着色V2
2006/10/14 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python机器学习实战之树回归详解
2017/12/20 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python实现扫雷游戏
2020/03/03 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
一套C#面试题
2013/10/09 面试题
同事打架检讨书
2014/02/04 职场文书
英语课外活动总结
2014/08/27 职场文书
党员检讨书范文
2014/12/27 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
现货白银电话营销话术
2015/05/29 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python