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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
php提取微信账单的有效信息
2018/10/01 PHP
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python统计一个文本中重复行数的方法
2014/11/19 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python实现指定ip端口扫描方式
2019/12/17 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
预备党员党校学习自我评价分享
2013/11/12 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
工程项目合作意向书
2015/05/08 职场文书
人与自然观后感
2015/06/16 职场文书
服装店员工管理制度
2015/08/07 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android