Ajax实现下拉框级联（在servlet中把从数据库取出来的值以json形式返回ajax，用jquery遍历便利更新<option>的值）

在写酒店管理系统时，想把选好的房间类型当作条件，选择符合条件类型的房间号，显示在另一个下拉框中。

这种肯定是要用ajax，首先是在房间类型的<select>语句中使用onblur调到ajax

--------------jsp------------------------------

<select class="select" name="roomType" size="1" οnblur="SelectRoomAjax(this)">
        <option value="单人大床">单人大床</option>
        <option value="单人标准">单人标准</option>
        <option value="双人标准">双人标准</option>
        <option value="双人大床">双人大床</option>
       </select> 

        <select class="select"  id="Select" name="roomId">  

-----------------javaScript------中的-ajax

function SelectRoomAjax(Obj){
/* creatxmlhttp(); */
alert("11111111111111");
 var roomType = $("select[name=roomType]").val(); 
//使用的是jquery
//obj是指input这个文本，调用obj.value才能获得输入的文本框的信息
$("select[name=roomId]").empty();   
alert("111222222222222222222222");
//清空  
        $.ajax({
        url:'./SelectRoomAjaxServlet',  
        type:"post", 
        data:{  
            roomType : roomType  
        },
        cache: false,  
        error:function(){  
        },   
        success:function(data){ 
        //将json数据转换成对象
        alert(data);//data的值输出为【1，3，4】类型的，但是它是json格式的数据所以在each遍历语句中要把它转换成
        //JSON.parse(data)是将json格式再转换成javaScript对象
        alert(JSON.stringify(data));
        var option = '';
           $.each(JSON.parse(data),function(n,value){  //jquery语句 function (index, value)中index是当前元素的位置，value是值。
       //遍历之后将option付给id为select的select标签
               $("#Select").append("<option value='"+value+"'>"+value+"</option>");
                    })
      
        }  
    });  

}

-----------------------servlet-----------

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String roomType = request.getParameter("roomType");
request.setCharacterEncoding("utf-8");
response.setContentType("   ");
Vector<Integer> v = new Vector<Integer>();
System.out.println(roomType);
String sql = "select  roominfo_roomId from t_roominfo where roominfo_type='"+roomType+"' and roominfo_state='true'";
System.out.println(sql);
ResultSet rs = jdbc2.select(sql);
try {
while(rs.next()) {
int a = rs.getInt("roominfo_roomId");
v.add(a);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

for(int i = 0;i < v.size();i++){ 
System.out.println(v.get(i)); 
} 
//将vector类型转换成json类型的。
String jsonString = JSONArray.fromObject(v).toString();
        //返回给浏览器
        response.getWriter().println(jsonString);
        System.out.println(jsonString);//输出的还是数组形式，但返回的还是json格式的

}

另外还有几种常见的$.each语句

$.each遍历对象---------------------------

1.  $.each(obj,function(n,value) {  //一个value就是一个对象 
2.            alert(n+' '+value);  
3.            var trs = "";  
4.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
5.              tbody += trs;         
6.            });  
7.          $("#project").append(tbody);  

$.each遍历数组-----------------------

1. var anArray = ['mma','bba','gge'];  
2.      $("#result").html("------------遍历数组 .each的使用-------------");  
3.            $.each(anArray,function(n,value) {  
4.             alert(n+' '+value);  
5.            var trs = "";  
6.              trs += "<tr><td>" +value+"</td></tr>";  
7.               tbody += trs;  
8.             });  
9.           $("#project").append(tbody);  

$.each遍历list-----------------------

1. var obj =[{"name":"项海军","password":"123456"},{"name":"科比","password":"333333"}];  
2.   $("#result").html("遍历List集合 .each的使用");  
3.     alert(obj);//是个object元素  
4.  //下面使用each进行遍历  
5.  $.each(obj,function(n,value) { //一个value就是一个对象  
6.          alert(n+' '+value);  
7.          var trs = "";  
8.            trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
9.            tbody += trs;         
10.          });  
11.        $("#project").append(tbody);  
12. });