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判断密码强度实现思路及代码
Apr 24 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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接口中interface存在的意义
2013/06/27 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
Bootstrap表单布局
2016/07/19 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python从零开始创建区块链
2018/03/06 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python入门必须知道的11个知识点
2018/03/21 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
基于Python的OCR实现示例
2020/04/03 Python
导致python中import错误的原因是什么
2020/07/01 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
促销活动方案模板
2014/02/24 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
给朋友的赠语
2015/06/23 职场文书
2016情人节宣传语
2015/07/14 职场文书
六五普法心得体会2016
2016/01/21 职场文书