在csdn上见到一个朋友问的,私信又有字数限制,所以在这里写一篇博客:
首先,了解一下二级菜单的作用。即:二级菜单会根据一级菜单值的不同而动态的改变其下拉选项的值。
下面是根据所属园区改变楼宇的值:
首先:新建两个选择菜单,作为一级菜单和二级菜单。
所属园区
<select id="parkID" name="parkID" style="width:180px;height:30px" onchange="javascript:setBuilding()">
<option value=""> 请选择</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();
/*将二级菜单的下拉框的内容清空*/
}
}
新手一个,二级菜单的方法应该有很多,希望共同进步。