A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 胡大强 中级黑马   /  2012-6-12 23:06  /  2767 人查看  /  3 人回复  /   1 人收藏 转载请遵从CC协议 禁止商业使用本文

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

3 个回复

倒序浏览
第一个下拉改变后,用ajax从数据库中取出对应的第二个和第三个下拉框的内容,用javascript或jquery动态更新那两个下拉框。
改变第二个跟第一个类似,也是需要用ajax从服务器端取数据的,然后动态更新下拉框。
回复 使用道具 举报
首先,假设有三个数据表,一个是school,一个是college,一个是subject。
对应的choseSelect.html代码如下:
  1. <FONT color=black><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Ajax实现下拉框</title>
  6. <script type="text/javascript">
  7. //定义一个变量用于存放XMLHttpRequest对象
  8. var xmlHttp;

  9. //改函数用于创建一个XMLHttpRequest对象
  10. function createXMLHttpRequest(){
  11. if(window.ActiveXObject){
  12. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  13. }else if(window.XMLHttpRequest){
  14. xmlHttp=new XMLHttpRequest();
  15. }
  16. }

  17. //响应页面完成加载事件的处理方法
  18. function updateSelect1(){
  19. createXMLHttpRequest();
  20. xmlHttp.onreadystatechange=processor1;
  21. xmlHttp.open("GET", "SchoolXML");
  22. xmlHttp.send(null);
  23. }

  24. //处理从服务器返回的XML文档更新学校列表
  25. function processor1(){
  26. //定义一个变量用于存放从服务器返回的相应结果
  27. var result;
  28. if(xmlHttp.readyState==4){//如果响应完成
  29. if(xmlHttp.status==200){//如果响应返回成功
  30. //取出服务器返回的XML文档的所有学校的子节点
  31. result=xmlHttp.responseXML.getElementsByTagName("school");
  32. //先清除学院列表的现有内容
  33. while(document.getElementById("select1").options.length>0){
  34. document.getElementById("select1").removeChild(document.getElementById("select1").childNodes[0]);
  35. }
  36. //解析XML中的数据并更新学院列表
  37. for(var i=0;i<result.length;i++){
  38. var option=document.createElement("OPTION");
  39. //取出<schoolname>中的值
  40. option.text=result[i].childNodes[0].childNodes[0].nodeValue;
  41. //取出<schoolvalue>中的值
  42. option.value=result[i].childNodes[1].childNodes[0].nodeValue;

  43. //在学院列表中添加选项
  44. document.getElementById("select1").options.add(option);
  45. }
  46. }
  47. }
  48. }

  49. //响应学校列表的onChange事件的处理方法
  50. function updateSelect2(){
  51. //得到学校列表的当前选值
  52. var selected=document.getElementById("select1").value;
  53. //创建一个XMLHttpRequest对象
  54. createXMLHttpRequest();
  55. //将状态触发器绑定到一个函数
  56. xmlHttp.onreadystatechange=processor2;
  57. //通过GET方法指定的URL建立服务器的调用
  58. xmlHttp.open("GET","CollegeXML?selected="+selected);
  59. //发送请求
  60. xmlHttp.send(null);
  61. }

  62. //处理从服务器返回的XML文档并更新学院列表
  63. function processor2(){
  64. //定义一个变量用于存放从服务器返回的相应结果
  65. var result;
  66. if(xmlHttp.readyState==4){//如果响应完成
  67. if(xmlHttp.status==200){//如果响应返回成功
  68. //取出服务器返回的XML文档的所有学校的子节点
  69. result=xmlHttp.responseXML.getElementsByTagName("college");
  70. //先清除学院列表的现有内容
  71. while(document.getElementById("select2").options.length>0){
  72. document.getElementById("select2").removeChild(document.getElementById("select2").childNodes[0]);
  73. }

  74. //如果没有得到数据,说明该学校没有学院
  75. if(result.length==0){
  76. var option=document.createElement("OPTION");
  77. option.text="没有设置学院";
  78. //取出<collegevalue>中的值
  79. option.value="0000";
  80. //在学院列表中添加选项
  81. document.getElementById("select2").options.add(option);
  82. }

  83. //解析XML中的数据并更新学院列表
  84. for(var i=0;i<result.length;i++){
  85. var option=document.createElement("OPTION");
  86. //取出<collegename>中的值
  87. option.text=result[i].childNodes[0].childNodes[0].nodeValue;
  88. //取出<collegevalue>中的值
  89. option.value=result[i].childNodes[1].childNodes[0].nodeValue;
  90. //在学院列表中添加选项
  91. document.getElementById("select2").options.add(option);
  92. }

  93. }
  94. }
  95. }

  96. //响应学院列表的onChange事件的处理方法
  97. function updateSelect3(){
  98. //得到学校列表的当前选值
  99. var selected=document.getElementById("select2").value;
  100. //创建一个XMLHttpRequest对象
  101. createXMLHttpRequest();
  102. //将状态触发器绑定到一个函数
  103. xmlHttp.onreadystatechange=processor3;
  104. //通过GET方法指定的URL建立服务器的调用
  105. xmlHttp.open("GET","SubjectXML?selected="+selected);
  106. //发送请求
  107. xmlHttp.send(null);
  108. }

  109. //处理从服务器返回的XML文档并更新学院列表
  110. function processor3(){
  111. //定义一个变量用于存放从服务器返回的相应结果
  112. var result;
  113. if(xmlHttp.readyState==4){//如果响应完成
  114. if(xmlHttp.status==200){//如果响应返回成功
  115. //取出服务器返回的XML文档的所有学校的子节点
  116. result=xmlHttp.responseXML.getElementsByTagName("subject");
  117. //先清除学院列表的现有内容
  118. while(document.getElementById("select3").options.length>0){
  119. document.getElementById("select3").removeChild(document.getElementById("select3").childNodes[0]);
  120. }

  121. //如果没有得到数据,说明该学院没有系
  122. if(result.length==0){
  123. var option=document.createElement("OPTION");
  124. option.text="没有设置专业";
  125. //取出<collegevalue>中的值
  126. option.value="0000";
  127. //在学院列表中添加选项
  128. document.getElementById("select3").options.add(option);
  129. }

  130. //解析XML中的数据并更新学院列表
  131. for(var i=0;i<result.length;i++){
  132. var option=document.createElement("OPTION");
  133. //取出<collegename>中的值
  134. option.text=result[i].childNodes[0].childNodes[0].nodeValue;
  135. //取出<collegevalue>中的值
  136. option.value=result[i].childNodes[1].childNodes[0].nodeValue;
  137. //在学院列表中添加选项
  138. document.getElementById("select3").options.add(option);
  139. }

  140. }
  141. }
  142. }
  143. </script>


  144. </head>
  145. <body onload="updateSelect1()">
  146. <h1 align="center">请对院系进行选择</h1>
  147. <hr>
  148. <div align="center" id="div1">



  149. <select id="select1" onChange="updateSelect2()">
  150. <option value="0">请选择学校</option>
  151. </select>
  152.    
  153. <select id="select2" onChange="updateSelect3()">
  154. <option value="0">请选择学院</option>
  155. </select>
  156.    
  157. <select id="select3">
  158. <option value="0">请选择专业</option>
  159. </select>



  160. </div>
  161. </body>
  162. </html></FONT>
复制代码
然后,对应的有三个Servlet类,一个是SchoolXML,一个是CollegeXML,一个是Subject。
SchoolXML.java文件如下:
  1. package com.songhao.ajax;

  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import java.util.ArrayList;
  5. import java.util.List;

  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;

  10. import com.songhao.DB.SchoolDao;
  11. import com.songhao.bean.School;

  12. /**
  13. * Servlet implementation class SchoolXML
  14. */
  15. public class SchoolXML extends HttpServlet {
  16. private static final long serialVersionUID = 1L;

  17. /**
  18. * @see HttpServlet#HttpServlet()
  19. */
  20. public SchoolXML() {
  21. super();
  22. // TODO Auto-generated constructor stub
  23. }

  24. /**
  25. * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  26. */
  27. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  28. // TODO Auto-generated method stub
  29. doPost(request,response);
  30. }

  31. /**
  32. * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  33. */
  34. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  35. // TODO Auto-generated method stub
  36. response.setContentType("text/xml");
  37. response.setCharacterEncoding("utf-8");

  38. PrintWriter out=response.getWriter();
  39. out.println("<response>");

  40. //连接数据库,将所有的学校取出来
  41. SchoolDao schDao=new SchoolDao();
  42. List<School> schools=new ArrayList<School>();
  43. try{
  44. schDao.getConn();
  45. schools=schDao.getAllSchool();
  46. }catch(Exception e){
  47. e.printStackTrace();
  48. }finally{
  49. schDao.closeAll();
  50. }

  51. for(int i=0;i<schools.size();i++){
  52. out.println("<school>");
  53. out.println("<schoolname>"+schools.get(i).getName()+"</schoolname>");
  54. out.println("<schoolvalue>"+schools.get(i).getId()+"</schoolvalue>");
  55. out.println("</school>");
  56. }

  57. out.println("</response>");
  58. out.flush();
  59. out.close();
  60. }

  61. }
复制代码
其它两个文件与他基本类似,希望对你有帮助!!


点评

太牛了!我只会用jquery xmlHttp不怎么用,关键是写法太繁琐的   发表于 2012-6-13 02:43
哥们太给力了!  发表于 2012-6-13 00:38

评分

参与人数 1黑马币 +12 收起 理由
赵志勇 + 12

查看全部评分

回复 使用道具 举报
嗯。。。给力了。。。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马