jQuery简易实现动态读取数据库的二级下拉框

下拉框是做开发几乎必有的，无论是做网站还是做终端，今天我就来介绍一下用jQuery实现的动态的下拉框
最常见的城市级联一类的，而且最常见的很多是用XML文件等实现的，这些都是写死的，而且这些几乎网上随随便便都能找到，我就不一一介绍了，我这里要说的是很多人可能会遇到的，从数据库里读取的数据绑定给下拉列表（从关系数据库的思想来讲这种情况几乎都出现在OnToMany中）通常解决的问题是一个大类中包含多个小类，一个小类中包含多个记录，废话不多说，下面我直接给一个例子。

解决思想是通过上一级的下拉列表的change事件动态绑定本级下拉列表

解决的问题，酒店中一个模块有多个房型，每个房型下面有多个房间，每个房间又有多个场景，然而要做的是房型+房间的二级下拉列表

解决步骤先从数据库中读取房型集合，循环绑定给一级下拉列表
在jQuery中
$("#roomtypexz").change(// roomtypexz是一级下拉列表的id
function(){
var roomtypeid = $(this).val();// 获取被选中的项的id
if (roomtypeid != ""){// 过滤如果选中默认项因为value没有值导致空指针异常
$.ajax({
type:'post',
url:'/smartHotelUser/jlRoomByTypeId',// 通过一级下拉列表被选中的项查询二级下拉列表绑定的数据的集合的Action
data:'typeid='+roomtypeid,// 传入参数
success:function(value){// 执行完成/获取参数
var roomdata = value.split("-");// 处理参数
var roomids = roomdata[0].split(":");// 处理参数房间id
var roomnum = roomdata[1].split(":");// 处理参数房间编号
$("#roomID").empty(); // 清空房间下拉框
var option = "<option>请选择房间</option>";// 定义第一个（默认）选项
// 循环拼接二级下拉列表
$.each(roomids, function(i, roomid) {
// 去除split拆分的（x:x:）中最后一个空项
if (i < roomids.length-1){
option += "<option id='"+roomid+"' value='"+roomid+"'>"+roomnum[i]+"</option>";
}
});
$("#roomID").append(option);
},
error:function(msg){
alert("ajax执行失败！");
}
});
} else {// 如果选中默认项的处理，我这里是查询所有，可自定义处理
window.location.href="/smartHotelUser/findHotelMsg/?pageFlg=scene&erCode=1111&typeid=&roomid=";
}
}
);

以上是jQuery，下面我给出HTML中的代码

<label>对应房型</label>
        <select id="roomtypexz" name="roomTypeID">
            <option value="">请选择房型</option>
            @ for (roomTypeLi in roomTypeList){
                <option id="${roomTypeLi.type_id!}" value="${roomTypeLi.type_id!}" ${isSame(typeID!, 
                    roomTypeLi.type_id!, "selected='selected'")}>${roomTypeLi.type_name!}</option>
            @ }
        </select>
        <label>对应房间</label>
        <selectid="roomID" name="roomID">
            <option value="">请选择房间</option>
            @ for (roomLi in roomList){
                <option id="${roomLi.room_id!}" value="${roomLi.room_id!}" ${isSame(roomID!, 
                    roomLi.room_id!, "selected='selected'")}>${roomLi.room_num!}</option>
            @ }
        </select>

说明：以上的以“@”打头的行是插入的代码片段，因为我用的不是struts所以会有一些不一样，这个需要根据不同的框架用不同的东西，的那是用法都一样
roomTypeList是房型集合，roomList是默认选中房型下的房间集合，可以不需要的

   <label>对应房间</label>
        <selectid="roomID" name="roomID">
            <option value="">请选择房间</option>
            @ for (roomLi in roomList){
                <option id="${roomLi.room_id!}" value="${roomLi.room_id!}" ${isSame(roomID!, 
                    roomLi.room_id!, "selected='selected'")}>${roomLi.room_num!}</option>
            @ }
        </select> 

部分的代码可以直接改成

<label>对应房间</label>
    <selectid="roomID" name="roomID">
       <option value="">请选择房间</option>
    </select>

下面是jlRoomByTypeId的代码

    public void jlRoomByTypeId() throws IOException{
        HttpServletResponse response = getResponse();
        response.setContentType("text/html;charset=UTF-8");
        int typeID = getParaToInt("typeid");// 获取参数中房型id
        if(BittelRoom.dao.findRoomByTypeID(typeID) != null){
            List<BittelRoom> rooms = BittelRoom.dao.findRoomByTypeID(typeID);
            String roomdata = "";// 传回Ajax的数据
            String roomid = "";// 传回Ajax的数据 >> 房间id
            String roomnum = "";// 传回Ajax的数据 >> 房间num
            for (BittelRoom br : rooms) {
                roomid += String.valueOf(br.get("room_id"));
                roomid += ":";
                roomnum += br.get("room_num");
                roomnum += ":";
            }
            roomdata = roomid+"-"+roomnum;
            response.getWriter().print(roomdata);
            response.getWriter().flush();
            response.getWriter().close();
        }
        renderNull();
    }

这就是二级下拉框，主旨是二级下拉框从一级下拉列表的选中项查询，如果做三级下拉列表就可以从二级下拉列表的选中项查询，以此类推，这样处理起来简单易懂。