JQuery實現的二級聯動菜單

先看頁面代碼

 <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>
	    	&nbsp;&nbsp;
	    	<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>