javascript實現二級級聯菜單的簡單制作
編輯：關於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程序設計有所幫助。
小編推薦
熱門推薦