 
<!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=gb2312" /> 
<title>jQuery 二級(jí)聯(lián)動(dòng)</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#province").change(function(){ 
$("#province option").each(function(i,o){ 
if($(this).attr("selected")) 
{ 
$(".city").hide(); 
$(".city").eq(i).show(); 
} 
}); 
}); 
$("#province").change(); 
}); 
</script> 
</head> 
<body> 
<select id="province"> 
<option>----請(qǐng)選擇省份---- 
<option>北京 
<option>上海 
<option>江蘇 
</select> 
<select class="city"> 
<option>----請(qǐng)選擇城市---- 
</select> 
<select class="city"> 
<option>東城</option> 
<option>西城</option> 
<option>崇文</option> 
<option>宣武</option> 
<option>朝陽(yáng)</option> 
</select> 
<select class="city"> 
<option>黃浦</option> 
<option>盧灣</option> 
<option>徐匯</option> 
<option>長(zhǎng)寧</option> 
<option>靜安</option> 
</select> 
<select class="city"> 
<option>南京</option> 
<option>鎮(zhèn)江</option> 
<option>蘇州</option> 
<option>南通</option> 
<option>揚(yáng)州</option> 
</select> 
</body> 
</html> 

JQuery實(shí)現(xiàn)的二級(jí)聯(lián)動(dòng)菜單
先看頁(yè)面代碼
Html代碼

復(fù)制代碼代碼如下:

 
<tr> 
<td align="right" width="30%"><span class="red">*</span>短信類型：</td> 
<td align="left"> 
<select name='city' id='first'> 
<option value='-1'>==請(qǐng)選擇類型==</option> 
<#list typeList as t> 
<option value='${t.id}'>${t.name}</option> 
</#list> 
</select> 
&nbsp;&nbsp; 
<span id="second"> 
<select id="area" name="msgTypeId"> 
</select> 
</span> 
</td> 
</tr> 

其中id為first的下拉列表為第一個(gè)下拉列表，id為second的區(qū)域?yàn)榈诙€(gè)下拉列表。
JavaScript代碼：

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
$(function(){ 
$("#second").hide(); //初始化的時(shí)候第二個(gè)下拉列表隱藏 
$("#first").change(function(){ //當(dāng)?shù)谝粋€(gè)下拉列表變動(dòng)內(nèi)容時(shí)第二個(gè)下拉列表將會(huì)顯示 
var parentId=$("#first").val(); 
if(null!= parentId && ""!=parentId){ 
$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ 
var options=""; 
if(myJSON.length>0){ 
options+="<option value=''>==請(qǐng)選擇類型==</option>"; 
for(var i=0;i<myJSON.length;i++){ 
options+="<option value="+myJSON[i].id+">"+myJSON[i].name+"</option>"; 
} 
$("#area").html(options); 
$("#second").show(); 
} 
else if(myJSON.length<=0){ 
$("#second").hide(); 
} 
}); 
} 
else{ 
$("#second").hide(); 
} 
}); 
}); 
</script> 