javascript实现二级级联菜单的简单制作
程序员文章站
2022-04-30 16:57:23
...
这篇文章主要介绍了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视频教程
下一篇： 基于zookeeper的主备切换方法
推荐阅读