动态二级菜单

在csdn上见到一个朋友问的，私信又有字数限制，所以在这里写一篇博客：

首先，了解一下二级菜单的作用。即：二级菜单会根据一级菜单值的不同而动态的改变其下拉选项的值。

下面是根据所属园区改变楼宇的值：

首先：新建两个选择菜单，作为一级菜单和二级菜单。 

所属园区
<select id="parkID" name="parkID" style="width:180px;height:30px" οnchange="javascript:setBuilding()">
<option value="">&nbsp;请选择</option>
</select>

所属楼宇
<select id="buildingID" name="buildingID" style="width:180px;height:30px"></select>

然后：在页面加载时为一级菜单赋值：

$(document).ready(function(){

/* 为园区信息下拉框赋值 */
$.ajax({
url:"getPark",
type:"POST",
dataType: "json",
success:function(data){
    for(var i=0;i<data.length;i++){
        var option = $("<option>").text(data[i].parkName).val(data[i].id);
        $("#parkID").append(option);
    }
}
});

})

而后：在一级菜单值被改变时，为二级菜单赋值

function setBuilding(){

var parkID=$("#parkID").val();/*获取到一级菜单的下拉值*/

if(parkID!=""&&parkID!=null){/*判断其是否选择了有效的值*/

$("#buildingID").empty(); /*将楼宇信息下拉框的内容清空，否则会出现下拉框的值一直累加*/

$.ajax({
url:"getBuilding",
type:"POST",
data:{
"parkID":parkID,
},
dataType: "json",
success:function(data){
    for(var i=0;i<data.length;i++){
        var option = $("<option>").text(data[i].buildingName).val(data[i].id);
        $("#buildingID").append(option);
    }
}
});

}else{/*如果用户选择了无效的值*/

$("#buildingID").empty(); /*将二级菜单的下拉框的内容清空*/

}

}

新手一个，二级菜单的方法应该有很多，希望共同进步。