JQuery和Ajax以及数据库实现动态select下拉框二级联动

使用JQuery和Ajax实现select下拉框二级联动
首先聊下项目背景。项目是一个类似于百度贴吧的平台，在项目里，用“协作组”表示贴吧的吧，“主题”表示每个吧里的帖子，用户可以对主题进行评论。我现在要做的是选定一个协作组，把协作组的话题的评论全部以Excel的形式导出来。因为话题是依赖于协作组的，所以选择的时候就需要将协作组的ID当做筛选话题的条件。
话不多说，直接上代码。
jsp：

<div style="margin-top: 15px; margin-left:5px; margin-bottom: 20px; 
width: 95%;overflow:hidden; ">
			<label style="margin-top:5px;margin-left:15px;float: left;">协作组:</label> 
			<select	class="form-control" id="group"
				style="margin-left: 15px; width: 70%; ;float: left; " onChange="findClass()">
				<option value="-1" selected = "selected">全部</option>
				<c:forEach items="${groups}" var="item">
					<option value="${item.id}">${item.name}</option>
				</c:forEach>
			</select>
			<label style="margin-top:20px;margin-left:15px;float: left; ">话题:</label> 
			<select  id="classId" name="classId" class="form-control" id="topic"
				style="margin-top:15px;margin-left: 15px; width: 70%; ;float: left; ">
						<option value="-1">请选择</option>
				</select>
	</div>

前面第一个select里面用forEach遍历所有的协作组，当选定某一个协作组时会触发findClass()这个函数，findClass()函数如下：

function findClass(){
var groupId = $("#group").val();
console.log(groupId);
$.ajax({
url:“findTopics”,
type:“get”,
data:{groupId:groupId},
success:function(data){
console.log(data);
$("#classId option").remove();
$("#classId").append(“请选择”);
if (data != 0) {
for ( var i = 0; i < data.length; i++) {
var topicId = data[i].topicId;
var topicName = data[i].topicName;
$("#classId").append(
“”
+ topicName + “”);
}
}
},
error : function(XMLResponse) {
alert(XMLResponse.responseText);
}
});
}

通过var groupId = $("#group").val();获取选定的协作组ID，再通过ajax将这个ID传递给后台，后台获取到这个ID后会通过ID去数据库查找此ID下的所有话题，然后返回给前台，这样就可以根据返回的数据动态增加显示话题option标签的
HTML代码。
整个项目是基于SSM框架实现的，很多JAR包已手动导入
后台代码如下：
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

@RequestMapping(value="/group/findTopics")
public String findClass(HttpServletRequest reuqest,HttpServletResponse response
) throws Exception{
response.setContentType(“text/json; charset=UTF-8”);
String groupId = reuqest.getParameter(“groupId”);
long userId = SessionHandler.getUserSession().getUserId();
// System.out.println("---------groupId是："+groupId);
Integer id = Integer.parseInt(groupId);
System.out.println("---------groupId是："+id);
PrintWriter out = null;
try{
out = response.getWriter();
}catch(Exception e){
e.printStackTrace();
}
JSONArray array = new JSONArray();
JSONObject member = null;
try{
//根据协作组的Id 来查找协作组下的所有话题
ListtopicsList = groupTopicService.findTopicsByGroupId(id,userId);
for(Topics topic:topicsList){
member = new JSONObject();
member.put(“topicId”, topic.getTopicId());
member.put(“topicName”, topic.getTopicName());
// System.out.println("------------------------"+topic.getTopicName());
array.add(member);
}
}catch(Exception e){
e.printStackTrace();
}
out.print(array.toString());
return null;
}
至此，整个select下拉框二级联动差不多已实现。
前台显示如下：
点击上面的协作组，会出来相应的协作组话题，如下图