java jsp 页面下拉框 ajax异步加载数库数据

全面详细的新手下拉框数据显示。web项目中难免用到下拉框异步加载数据的情况。这里分享一个。使用的是jquery的ajax异步加载后台数据。后台使用java语言。

1，先看效果，下拉框如下：

2.获取值：

3.html页面代码：

/js/jquery-1.8.2.min.js 这个文件是需要引入的，为了用ajax。

$(function () {
    setDa();
});



function setDa(){
    var url="http://"+window.location.host+"/monitor-web/web/selectBox.do?server_type="+server_type;
    $.ajax({
        url: url,
        type:"post",
        dataType: "json",
        data : {
            "c_type" : "c",
            "t_type":"b"
        },
        success:function (data){
            var selectOption = "";
            selectOption += "<option></option>";
            $.each(data, function(n, value) {
               // alert(n+" --"+JSON.stringify(value));
                selectOption+="<option value="+value.s_value+">"+value.s_label+"</option>"
            });
            $('#selectbox').html(selectOption);
        }
    });

};
function getDa(){

         // alert($('#selectbox'));
    var d=document.getElementById("selectbox").value;
   alert(d);
};

<select id="selectbox" style="width: 200px">
</select>
<input type="button" value="取值"  style="width: 200px;height: 30px" οnclick="getDa()">

4.java后台：这里把值value和显示的标签label放入json中实现。至于数据库嘛，查出数据往obj里面放就好了

@RequestMapping("/selectBox")
public String selectBox(HttpServletRequest request, HttpServletResponse response) throws Exception {

    System.out.println("组装下拉框数据");
    JSONObject js1;
    JSONArray all=new JSONArray();
    for (int i=0;i<5;i++){
        js1=new JSONObject();
        js1.put("s_value","pro"+i);
        js1.put("s_label","显示"+i);
        all.put(js1);
    }
    response.setContentType("text/json;" + "charset=UTF-8");
    response.getWriter().write(all.toString());
    return null;
}