SSM + AJAX + JSON 动态下拉框

前台页面

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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(plexList, function(i,item){

$('#complexid').append("<option value="+ umber+">"+ umber+"</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"> </td>

<td colspan="3" class="mian_b_bg_lm">添加单元信息</td>

</tr>

<tr>

<td> </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%"> </td>

</tr>

<tr>

<td> </td>

<td width="7%" valign="top">所属楼栋：</td>

<td width="60%">

<select id="complexid" name="complexid" class="input_01">

</select>

</td>

<td width="25%"> </td>

</tr>

<tr>

<td> </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%"> </td>

</tr>

<tr>

<td> </td>

<td valign="top">房间数量：</td>

<td>

<input type="text" class="input_01" name="housecount" id="housecount" value=""></td>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

<td>

<div align="center">

<input type="submit" value="确认" >

<input type="button" value="取消" οnclick="click()" >

<td> </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 包