萬盛學電腦網 >> 腳本專題 >> javascript >> Javascript實現動態菜單添加的實例代碼
Javascript實現動態菜單添加的實例代碼
先來看看效果：
Html源碼：
復制代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態改變菜單</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="SelectMenu.js"></script>
</head>
<body>
<form action="#">
<br/>
<br/>
<br/>
<div class="Address">
<span class="Province">Province：
<select>
<option value="" selected="selected">Please Choose Province</option>
<option value="HeBei">HeBei</option>
<option value="ShanDong">ShanDong</option>
</select>
</span>
<span class="City" style="display:none">City：
<select>
</select>
</span>
<span class="Area" style="display:none">Area：
<select>
</select>
</span>
<br/>
<br/>
<span class="AddressSelect" style="display:none">
</span>
</div>
</form>
</body>
</html>
Javascript源碼
$(document).ready(function () {
//找到三個下拉框
var ProvinceSelect = $(".Province").children("select");
var CitySelect = $(".City").children("select");
var AreaSelect = $(".Area").children("select");
var AddressSelect=$(".AddressSelect");
//給第二個下拉框注冊事件
ProvinceSelect.change(function () {
//1、獲取當前下拉框的值
var ProvinceValue = $(this).val();
//1.1只要第一個下拉框內容有變化，第三個下拉框就要隱藏起來
AreaSelect.parent().hide();
AddressSelect.hide();
AddressSelect.html("");
//2、如果值不為空，則顯示城市下拉框
if (ProvinceValue != "") {
CitySelect.html("");
$("<option value=''>Please Choose City</option>").appendTo(CitySelect);
switch(ProvinceValue)
{
//實際項目中，這個城市數組肯定是在服務器獲取的，這裡為了簡便，我就直接自定義了一個數組
//如果追求完美，這裡還可以加一道緩存，防止重復獲取
case "HeBei":
var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];
for(var i=0;i<CityOfHeBei.length;i++){
$("<option value='"+CityOfHeBei[i]+"'>"+CityOfHeBei[i]+"</option>").appendTo(CitySelect);
}
break;
case "ShanDong":
var CityOfShanDon=["JiNan","DeZhou","QingDao"];
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved