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 相关文章推荐
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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中常用的预定义变量小结
2012/05/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Maps Javascript
2007/01/22 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
python开发简易版在线音乐播放器
2017/03/03 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python logging模块原理解析及应用
2020/08/13 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
物流专员岗位职责
2014/02/17 职场文书
《钱学森》听课反思
2014/03/01 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
文明寝室申报材料
2014/05/12 职场文书
租房协议书范例
2014/10/14 职场文书
工作报告范文
2019/06/20 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python