javascript实现二级级联菜单的简单制作
更新时间：2015年11月19日 11:39:58 作者：翱翔天地
这篇文章主要介绍了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程序设计有所帮助。
相关文章
这篇文章主要介绍了js中iframe调用父页面的方法,可通过window.parent.方法()来实现,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了如何基于JavaScript构建高级视频播放器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下2017-06-06
在Web开发中,处理日期和时间是常见的需求之一,特别是在金融、人力资源等领域,经常需要计算特定的日期范围或工作日,本文将深入探讨如何使用JavaScript计算当前时间前N个工作日,并提供详细的代码示例和实际开发中的技巧,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了利用try-catch判断变量是已声明未赋值还是未声明,需要的朋友可以参考下2014-03-03
这篇文章主要为大家介绍了Electron 电源状态管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
下面小编就为大家带来一篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
javascript两行代码即可实现按指定格式输出日期时间，非常不错，需要的朋友可以参考下2011-10-10
Javascript实现Array和String互转换的方法
这篇文章主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下2015-12-12
最新评论