jsp页面如何实现级联的下拉列表框

网站登录首页，如果实现先选择部门，然后在选择人员的功能。。用的是struts2，部门级人员都已经存在数据库中了！

请指点一二，尽可能详细点，有代码最好！谢谢

9 个解决方案

#1

<select name="" value="">
<option value="">""</option>
</select>

用标签循环<option>那行  

#2

点击部门下拉列表时，增加一个onchange事件，在onchange事件里动态（用ajax）获取人员的列表

#3

引用 2 楼  的回复:

点击部门下拉列表时，增加一个onchange事件，在onchange事件里动态（用ajax）获取人员的列表

ajax不会呀！！

#4

不会得学啊。。   你去百度搜一下  级联查询  有例子 

#5

既然部门那些信息都已经在数据库了，最佳办法肯定是ajax了，实在不会，并且人员不多就一次取出来，用个JS变量装起来 - -

#6

switch判断吧

#7

ajax必须会啊  方便多了

#8

下面的是我做添加班级模块时做的用ajax实现二级联动下拉列表的例子，ajax代码在javascript中，通过第一个下拉列表的onchange方法触发ajax后台自动调用SelectChangeServlet，得到第二个下拉列表的数据。

      <script language="javascript">
		var xmlHttpRes;  
		  
		function createXMLHttpRequest() {
			if(window.XMLHttpRequest) {  
				xmlHttpRes = new XMLHttpRequest();  
			} else if(window.ActiveXObject) {  
				xmlHttpRes = new ActiveXobject("Microsoft.XMLHTTP");  
			}
		}  
		  
		function selectchange() {
			createXMLHttpRequest();  
			var department = document.getElementById("department").value;
			var url = "selectChangeServlet?department=" + department;
			xmlHttpRes.open("post", url, true);  
			xmlHttpRes.onreadystatechange = callback;  
			xmlHttpRes.send(null);  
		}  
		  
		function callback() { 
			if(xmlHttpRes.readyState == 4) {  
				if(xmlHttpRes.status == 200) {
					eval(xmlHttpRes.responseText);  
				}  
			}  
		}
		function show(){
			var department = document.getElementById("department").value;
			var classInfo = document.getElementById("classInfo").value;
			alert("您确定是上【" + department + classInfo + "】的课吗？") ;
		}
	</script>

<table width="458" valign="middle"bgcolor="#F0F0F0">
	<form action="addSyllabusServlet"method="post"name="addform"id="addform"onsubmit="return check()">
		<tr height="50">
			<td colspan="5">&nbsp;</td>
		</tr>
		<tr>
			<td width="30">&nbsp;</td>
			<td width="50">系别：</td>
			<td>
				<select name="department" id="department"style="width:130"onchange="selectchange()">
					<option value="">--请选择系别--</option>
<%
				for (int i=0;i<allDepartments.size();i++) {
					dep = allDepartments.get(i) ;
%>
					<option value="<%=dep%>">  
					<%=dep%> 
					</option>  
<%  
				}  
%>  
			</td>
			<td width="50">班别：</td>
			<td>
				<select name="classInfo" id="classInfo"style="width:130"onchange="show()">  
					<option value="">--请选择班别--</option>
				</select>
			</td>
		</tr>
		<tr>
			<td width="30">&nbsp;</td>
			<td colspan="4">课程名称：&nbsp;&nbsp;<input type="text"name="subject"id="subject"style="width:250" /></td>
		</tr>
		<tr>
			<td colspan="5">
				<input type="hidden"name="teacherID"value=<%=teacherID%> />
				<input type="hidden"name="teacherName"value=<%=teacherName%>>
			</td>
		</tr>
		<tr>
			<td colspan="5"><hr></td>
		</tr>
		<tr>
			<td width="30">&nbsp;</td>
			<td colspan="5">
				<input type="submit" value="保存" />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset"value="重置" />
			</td>
		</tr>
		<tr height="50">
			<td colspan="4">&nbsp;</td>
		</tr>
	</form>
	</table>

package com.hanfang.tes.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.hanfang.tes.factory.ITesDAOFactory;
import com.hanfang.tes.vo.ClassInfo;

public class SelectChangeServlet extends HttpServlet {
	private String department = null ;
	private ClassInfo classInfo = null ;
	private List<ClassInfo> allClasses = null ;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		department = request.getParameter("department") ;
		if(department != null){
			department = new String(department.getBytes("iso8859-1"),"GBK") ;
		}
		response.setContentType("text/html; charset=GBK");  
        PrintWriter out = response.getWriter(); 
        try {
			allClasses = ITesDAOFactory.getITesDAOInstance().findClassesOfDepartment(department);
		} catch (Exception e) {
			e.printStackTrace();
		}  
        out.println("document.getElementById('classInfo').length = " + allClasses.size());  
        out.println("document.getElementById('classInfo').selectedIndex = 0");
		for(int i=0; i< allClasses.size(); i++) {  
			classInfo = allClasses.get(i);  
			out.println("document.getElementById('classInfo').options[" + i + "].value = '" + classInfo.getStu_class() + "'");  
			out.println("document.getElementById('classInfo').options[" + i + "].text = '" + classInfo.getStu_class() + "'");  
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request,response) ;
	}
}

#9

jsp中：

<tr>
	<td>区域 </td>
	<td>
		<select style="width: 155px" id="selectArea" name="issueTracking.areaCode" onchange="whenAreaChange();"></select>
		<s:textfield name="issueTracking.areaName" id="textAreaName" readonly="true" />
	</td>
</tr>
<tr>
	<td>製程</td>
	<td>
		<select style="width: 155px" id="selectProcess" name="issueTracking.process"></select>
		<s:textfield name="issueTracking.processName" id="textProcess" readonly="true" />
	</td>
</tr>

js中：

function whenAreaChange(){
		var selectedArea=$("#selectArea").val();
	   $.ajax({
			type: "post",
			url: "XXXX.action?参数名="+selectedArea,
			async: false,
			dataType: "json",
			success: function showContent(json) {		
				var processStr = "";
				$("#selectProcess").empty();//清空列表
				for(var i=0; i<json.processList.length; i++) {
					processStr = json.processList[i];
					var option = $("<option>").text(processStr.label).val(processStr.value);
					$("#selectProcess").append(option);//向清空的列表中增加新值
				}
			}
		});
	 }

现在剩下的就是如何用struts2传值到json中，这个就不用说了吧