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 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 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源代码
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python如何爬取网页中的文字
2020/07/28 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
params有什么用
2016/03/01 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
先进个人评语大全
2015/01/04 职场文书
新员工辞职信范文
2015/05/12 职场文书
好人好事新闻稿
2015/07/17 职场文书
调研报告的主要写法
2019/04/18 职场文书
导游词之千岛湖
2019/09/23 职场文书