时间:2021-05-26
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jQuery1.3.2简单实现select二级联动复制代码代码如下:jQuery二级联动$(document).ready(function(){$("#pro
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考,具体如下:JSP代码:二级菜单联动演示varreq;window.onload=functi
在开发过程中,遇到过非常多的二级联动,下面是我总结出来的几种二级联动案例二级联动(1)第一种案例是一种比较简单的二级联动,利用jquery的显示隐藏来实现,对于
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下:这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS
复制代码代码如下:AjaxPro实现二级联动AjaxPro实现二级联动 省份城市functionShowCity(id){varres=Test.Ge