SSM + AJAX + JSON 动态下拉框

前台页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="../Admin/role/css/index.css">
<script type="text/javascript" src="../Admin/role/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">    
    function click() {  
     window.location.href = 'SelectAll.do';
}
$(function() {
$("#projectid").mouseleave(
function() {

var projectid = $("#projectid").val();
alert(projectid);
$.ajax({
url : "selectProject.do",
type : "POST",
dataType : "json",
data : {
projectid : projectid,
},
success : function(data) {
$('#complexid').empty();
$('#complexid').append("<option value="">-------请选择楼栋-------</option>");
jQuery.each(data.complexList, function(i,item){ 
$('#complexid').append("<option value="+ item.cnumber+">"+ item.cnumber+"</option>");
 }); 
return false;
              },
           });
    });
});
   
</script>
</head>
<body class="mian_bj">
<div class="mian_top_01">
<div class="mian_top_r"></div>
<div class="mian_top_l"></div>
<div class="mian_top_c">
</div>
<form action="addUnit.do" method="post">
<div class="mian_b">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mian_b_bg_xz">
<tr>
<td width="5%" class="mian_b_bg_lm">&nbsp;</td>
<td colspan="3" class="mian_b_bg_lm">添加单元信息</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%" valign="top">所属项目:</td>
<td width="60%">
  <select name="projectid" id="projectid" class="input_01">
          <option value="">----------请选择所属项目--------</option>
          <c:forEach var="project" items="${projectList}">
              <option value="${project.id }">${project.name}</option>
          </c:forEach>
 </select>
</td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%" valign="top">所属楼栋:</td>
<td width="60%">
 <select id="complexid" name="complexid" class="input_01">
 </select>
</td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%" valign="top">单元编号:</td>
<td width="60%">
<input type="text" class="input_01" name="number" id="number" value=""> </td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top">房间数量:</td>
<td>
<input type="text" class="input_01" name="housecount" id="housecount" value=""></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>
<div align="center">
<input type="submit"  value="确认"  >
<input type="button"  value="取消" onclick="click()" >
<td>&nbsp;</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>

后台接值

@ResponseBody
@RequestMapping("/selectProject.do")
   public String selectProject(HttpServletRequest request,HttpServletResponse response){
   Integer  projectid = Integer.parseInt(request.getParameter("projectid"));
System.out.println("projectid"+projectid);
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("projectid", projectid);
List<Complex> complexList=complexService.selectByProjectId(map1);
   JSONObject json = new JSONObject();
   json.put("complexList", complexList);
   PrintWriter out;
try {
out = response.getWriter();
out.println(json.toString()); 
   out.close(); 
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();

return null;
}

注意:需要导入json  jar   包

原文地址:https://www.cnblogs.com/ll0405/p/8280519.html