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 相关文章推荐
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 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
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
深入PHP curl参数的详解
2013/06/17 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php后门URL的防范
2013/11/12 PHP
php短址转换实现方法
2015/02/25 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
How TDD works
2012/09/30 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
交通事故起诉书
2015/05/19 职场文书
redis限流的实际应用
2021/04/24 Redis
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
MySQL新手入门进阶语句汇总
2022/09/23 MySQL