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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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和ACCESS写聊天室(四)
2006/10/09 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python实现的科学计算器功能示例
2017/08/04 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
详解python中sort排序使用
2019/03/23 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python如何使用代码运行助手
2020/07/03 Python
利用Python优雅的登录校园网
2020/10/21 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
打架检讨书400字
2014/01/17 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书