页面代码:
宿舍所在幢数:<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下*/
}