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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php实现登录页面的简单实例
2019/09/29 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
js charAt的使用示例
2014/02/18 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JS实现随机点名器
2020/04/12 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
django框架auth模块用法实例详解
2019/12/10 Python
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
另类冲刺标语
2014/06/24 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
中学教师教学工作总结
2015/08/13 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库