怎样实现下拉列表的三级级联？

一个页面有三个下拉列表框，实现级联，其中数据是从同一个数据库中读出。选择第一个下拉列表框时，第二个和第三个里面的数据会跟着变化

赵兵锋 · 赵兵锋

第一个下拉改变后，用ajax从数据库中取出对应的第二个和第三个下拉框的内容，用javascript或jquery动态更新那两个下拉框。
改变第二个跟第一个类似，也是需要用ajax从服务器端取数据的，然后动态更新下拉框。

宋浩 · 宋浩

首先，假设有三个数据表，一个是school,一个是college，一个是subject。
对应的choseSelect.html代码如下：

<FONT color=black><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax实现下拉框</title>
<script type="text/javascript">
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
//改函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
//响应页面完成加载事件的处理方法
function updateSelect1(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=processor1;
xmlHttp.open("GET", "SchoolXML");
xmlHttp.send(null);
}
//处理从服务器返回的XML文档更新学校列表
function processor1(){
//定义一个变量用于存放从服务器返回的相应结果
var result;
if(xmlHttp.readyState==4){//如果响应完成
if(xmlHttp.status==200){//如果响应返回成功
//取出服务器返回的XML文档的所有学校的子节点
result=xmlHttp.responseXML.getElementsByTagName("school");
//先清除学院列表的现有内容
while(document.getElementById("select1").options.length>0){
document.getElementById("select1").removeChild(document.getElementById("select1").childNodes[0]);
}
//解析XML中的数据并更新学院列表
for(var i=0;i<result.length;i++){
var option=document.createElement("OPTION");
//取出<schoolname>中的值
option.text=result[i].childNodes[0].childNodes[0].nodeValue;
//取出<schoolvalue>中的值
option.value=result[i].childNodes[1].childNodes[0].nodeValue;
//在学院列表中添加选项
document.getElementById("select1").options.add(option);
}
}
}
}
//响应学校列表的onChange事件的处理方法
function updateSelect2(){
//得到学校列表的当前选值
var selected=document.getElementById("select1").value;
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange=processor2;
//通过GET方法指定的URL建立服务器的调用
xmlHttp.open("GET","CollegeXML?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//处理从服务器返回的XML文档并更新学院列表
function processor2(){
//定义一个变量用于存放从服务器返回的相应结果
var result;
if(xmlHttp.readyState==4){//如果响应完成
if(xmlHttp.status==200){//如果响应返回成功
//取出服务器返回的XML文档的所有学校的子节点
result=xmlHttp.responseXML.getElementsByTagName("college");
//先清除学院列表的现有内容
while(document.getElementById("select2").options.length>0){
document.getElementById("select2").removeChild(document.getElementById("select2").childNodes[0]);
}
//如果没有得到数据，说明该学校没有学院
if(result.length==0){
var option=document.createElement("OPTION");
option.text="没有设置学院";
//取出<collegevalue>中的值
option.value="0000";
//在学院列表中添加选项
document.getElementById("select2").options.add(option);
}
//解析XML中的数据并更新学院列表
for(var i=0;i<result.length;i++){
var option=document.createElement("OPTION");
//取出<collegename>中的值
option.text=result[i].childNodes[0].childNodes[0].nodeValue;
//取出<collegevalue>中的值
option.value=result[i].childNodes[1].childNodes[0].nodeValue;
//在学院列表中添加选项
document.getElementById("select2").options.add(option);
}
}
}
}
//响应学院列表的onChange事件的处理方法
function updateSelect3(){
//得到学校列表的当前选值
var selected=document.getElementById("select2").value;
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange=processor3;
//通过GET方法指定的URL建立服务器的调用
xmlHttp.open("GET","SubjectXML?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//处理从服务器返回的XML文档并更新学院列表
function processor3(){
//定义一个变量用于存放从服务器返回的相应结果
var result;
if(xmlHttp.readyState==4){//如果响应完成
if(xmlHttp.status==200){//如果响应返回成功
//取出服务器返回的XML文档的所有学校的子节点
result=xmlHttp.responseXML.getElementsByTagName("subject");
//先清除学院列表的现有内容
while(document.getElementById("select3").options.length>0){
document.getElementById("select3").removeChild(document.getElementById("select3").childNodes[0]);
}
//如果没有得到数据，说明该学院没有系
if(result.length==0){
var option=document.createElement("OPTION");
option.text="没有设置专业";
//取出<collegevalue>中的值
option.value="0000";
//在学院列表中添加选项
document.getElementById("select3").options.add(option);
}
//解析XML中的数据并更新学院列表
for(var i=0;i<result.length;i++){
var option=document.createElement("OPTION");
//取出<collegename>中的值
option.text=result[i].childNodes[0].childNodes[0].nodeValue;
//取出<collegevalue>中的值
option.value=result[i].childNodes[1].childNodes[0].nodeValue;
//在学院列表中添加选项
document.getElementById("select3").options.add(option);
}
}
}
}
</script>
</head>
<body onload="updateSelect1()">
<h1 align="center">请对院系进行选择</h1>
<hr>
<div align="center" id="div1">
<select id="select1" onChange="updateSelect2()">
<option value="0">请选择学校</option>
</select>
<select id="select2" onChange="updateSelect3()">
<option value="0">请选择学院</option>
</select>
<select id="select3">
<option value="0">请选择专业</option>
</select>
</div>
</body>
</html></FONT>

复制代码

然后，对应的有三个Servlet类，一个是SchoolXML,一个是CollegeXML，一个是Subject。
SchoolXML.java文件如下：

package com.songhao.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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.songhao.DB.SchoolDao;
import com.songhao.bean.School;
/**
* Servlet implementation class SchoolXML
*/
public class SchoolXML extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SchoolXML() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml");
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
out.println("<response>");
//连接数据库，将所有的学校取出来
SchoolDao schDao=new SchoolDao();
List<School> schools=new ArrayList<School>();
try{
schDao.getConn();
schools=schDao.getAllSchool();
}catch(Exception e){
e.printStackTrace();
}finally{
schDao.closeAll();
}
for(int i=0;i<schools.size();i++){
out.println("<school>");
out.println("<schoolname>"+schools.get(i).getName()+"</schoolname>");
out.println("<schoolvalue>"+schools.get(i).getId()+"</schoolvalue>");
out.println("</school>");
}
out.println("</response>");
out.flush();
out.close();
}
}

复制代码

其它两个文件与他基本类似，希望对你有帮助！！

胡大强 · 胡大强

嗯。。。给力了。。。

帐号		自动登录	找回密码
密码			加入黑马

怎样实现下拉列表的三级级联？

3 个回复

点评

评分

黑马骑士勋章