级联菜单的实现

页面代码:

宿舍所在幢数:<select class="select" name="dorinum" id="dorinum"></select>
宿舍室门牌号:<select class="select" name="dormnum" id="dormnum"></select>

实现思路:

使用jquery

1、页面初始化时，在名为dorinum的select下显示所有的宿舍楼号选项

2、在点击名为dormnum的select时根据宿舍所在幢数，显示该宿舍楼下的所有宿舍室选项

服务端返回的json格式为:

[{id: "1"}, {id: "2"}, {id: "3"}, {id: "4"}]

js代码:

$(document).ready(function(){ 
	getDoridorm("<%=tempContextUrl%>/Doridorm?style=dori","#dorinum","幢");
	$('#dormnum').click(function(){ 
		var dorinum=$("#dorinum").val();
		if(dorinum.length>0)
			{
			$("#dormnum").empty();
			 getDoridorm("<%=tempContextUrl%>/Doridorm?style=dorm&dori="+dorinum,"#dormnum","室");
			}
	}
	);
})
function getDoridorm(url,selectid,name) /*获取服务端json*/
 {
	 
	 $.ajax({
		 type:"get",
		 url:url,
		 success:function(data){
			 var objec= JSON&&JSON.parse(JSON.stringify(data))||jQuery.parseJSON(data); //解析json
			 createoption(objec,selectid,name);
		 }		 
	 })
 }
 function createoption(objc,selectid,name) /*根据服务端返回的json,生成想对应的select选项,并把这些选项添加对应的select下*/
 {
	 var options="";
	 for(var i=0;i<objc.length;i++)
		 {
		 	options+="<option value='"+objc[i].id+"'>"+objc[i].id+name+"</option>"; /*生成想对应的select选项*/
		 }
	 $(selectid).append(options); /*选项添加对应的select下*/
 }