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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
Javascript的this详解
Mar 23 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue 开发之路由配置方法详解
Dec 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模板函数 正则实现代码
2012/10/15 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
js常用函数 不错
2006/09/08 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python如何发送与接收大型数组
2020/08/07 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
采购主管的岗位职责
2013/12/17 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
七年级英语教学反思
2016/02/15 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL