全面详细的新手下拉框数据显示。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; }