基于jquery的二級聯動菜單實現代碼

2019-11-20 23:50:42

字體：大中小

來源：轉載

供稿：網友

jQuery 1.3.2 簡單實現select二級聯動

 
<!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 二級聯動</title> 
<script src="http://img.VeVB.COm/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>----請選擇省份---- 
<option>北京 
<option>上海 
<option>江蘇 
</select> 
<select class="city"> 
<option>----請選擇城市---- 
</select> 
<select class="city"> 
<option>東城</option> 
<option>西城</option> 
<option>崇文</option> 
<option>宣武</option> 
<option>朝陽</option> 
</select> 
<select class="city"> 
<option>黃浦</option> 
<option>盧灣</option> 
<option>徐匯</option> 
<option>長寧</option> 
<option>靜安</option> 
</select> 
<select class="city"> 
<option>南京</option> 
<option>鎮江</option> 
<option>蘇州</option> 
<option>南通</option> 
<option>揚州</option> 
</select> 
</body> 
</html> 

JQuery實現的二級聯動菜單
先看頁面代碼
Html代碼

復制代碼代碼如下:

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

其中id為first的下拉列表為第一個下拉列表，id為second的區域為第二個下拉列表。
JavaScript代碼：

復制代碼代碼如下:

 
<script language="javascript"> 
$(function(){ 
$("#second").hide(); //初始化的時候第二個下拉列表隱藏 
$("#first").change(function(){ //當第一個下拉列表變動內容時第二個下拉列表將會顯示 
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=''>==請選擇類型==</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> 