javascript实现二级级联菜单的简单制作


Posted in Javascript onNovember 19, 2015

本文实例讲述了javascript实现二级级联菜单的简单制作方法。分享给大家供大家参考。具体如下:
运行效果截图如下:

javascript实现二级级联菜单的简单制作

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
  
 <title></title> 
  
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <script type="text/javascript" src="../../js/jquery-1.11.1.js"></script> 
 <style type="text/css"> 
  .body_tag{ 
   width: 100%; 
   height: 100%; 
  } 
 </style> 
 <script type="text/javascript"> 
  /** 
   * 
   */ 
   function province() 
   { 
    var proName = $("#areaName").val(); 
    $("#city").empty(); 
    $("#city").append("<option value='0'>全部</option>"); 
    if(proName == "1") 
    { 
     $("#city").append("<option value='1'>广州市</option>"+ 
         "<option value='2'>深圳市</option>"+ 
         "<option value='3'>中山市</option>"); 
    } 
    if(proName == "2") 
    { 
     $("#city").append("<option value='1'>武汉市</option>"+ 
         "<option value='2'>黄石市</option>"+ 
         "<option value='3'>黄冈市</option>"); 
    } 
   } 
 </script> 
 </head> 
 
 <body class="body_tag"> 
  <table id="tab"> 
   <tr> 
   <td> 
    <label for="areaName">省份:</label> 
    <select id="areaName" onchange="province()"> 
     <option value="0">全国</option> 
     <option value="1">广东</option> 
     <option value="2">湖北</option> 
    </select> 
    <label for="city">地市:</label> 
    <select id="city"> 
     <option value="0">全部</option> 
    </select> 
   </td> 
   </tr> 
  </table> 
 </body> 
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
vue组件name的作用小结
May 23 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
详解Vue之计算属性
Jun 20 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
js实现星星打分效果
2020/07/05 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
文化产业实施方案
2014/06/07 职场文书
十二生肖观后感
2015/06/12 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书