首页 > 代码库 > Ajax制作二级联动下拉列表框

Ajax制作二级联动下拉列表框

2024-08-01 01:03:11   223人阅读

1.index.jsp

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <html> 3   <head> 4     <script type="text/javascript" language="javaScript"> 5       var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象 6       function createXMLHttpRequest() { 7         if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法 8           try { 9             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");10           } catch(e) {11             try {12               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");13                //旧版本的Internet Explorer，创建XMLHttpRequest对象14             } catch(e) {15               window.alert("创建XMLHttpRequest对象错误"+e);16             } 17           }18         } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法19           xmlHttp = new XMLHttpRequest();20         } 21         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象22             window.alert("创建XMLHttpRequest对象异常！");23         }  24       }25 26       //下拉列表项改变时的操作27       function proChange(objVal) {28         createXMLHttpRequest(); //创建XMLHttpRequest对象29         document.getElementById("city").length = 1;     //根据ID获取指定元素，并赋值30         xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数31         var url = "/ComboTest/servlet/CityServlet?province=" + objVal; //请求的URL地址32         xmlHttp.open("GET",url,true);33         xmlHttp.send(null);34       }35       36       function cityList() { //onreadystatechange的处理函数37         if(xmlHttp.readyState==4) {38           if(xmlHttp.status==200) {39             parseXML(xmlHttp.responseXML);     //解析服务器返回的XML数据40           }41         }42       }43 44       //解析xml信息，以添加地市45       function parseXML(xmlDoc) {46         var len = xmlDoc.getElementsByTagName("city");47         //获取XML数据中所有的“city”元素对象集合48         var _citySel = document.getElementById("city");     //根据ID获取页面中的select元素49         for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项50           var opt = document.createElement("OPTION");     //创建option对象51           opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;52           //指定新创建元素的text属性值53           opt.value = http://www.mamicode.com/xmlDoc.getElementsByTagName("city")[i].firstChild.data;54           //指定新创建元素的value属性值55           _citySel.add(opt); //为select元素添加option56         }57       }58     </script>59     <title>动态加载组合框</title>60   </head>61   <body>62     <table align="center" border=1 width="320">63       <tr>64         <td>省份：</td>65         <td>66           <select id="province" onchange="proChange(this.value);" style="width:85">67             <option value="http://www.mamicode.com/gd">广东</option>68             <option value="http://www.mamicode.com/gx">广西</option>69             <option value="http://www.mamicode.com/hn">湖南</option>70             <option value="http://www.mamicode.com/hb">湖北</option>71             <option value="http://www.mamicode.com/ah">安徽</option>72           </select>73         </td>74       </tr>75       <tr>76         <td>地市：</td>77         <td>78           <select id="city" style="width:85">79             <option value="">--请选择--</option>80           </select>81         </td>82       </tr>83     </table>84   </body>85 </html>

2.CityServlet.java

 1 public class CityServlet extends HttpServlet { 2     private static final String CONTENT_TYPE = "text/xml; charset=UTF-8"; 3 //设置返回响应的ContentType 4     /** 5      *当前Servlet对象构造方法 6      */ 7     public CityServlet() { 8         super(); 9     }10     /**11      * 当前Servlet销毁时的操作。<br>12      */13     public void destroy() {14         super.destroy();15     }16     /**17      * 当前Servlet的doGet方法。<br>18      *19      * 当客户端表单的“method”类型为“get”时，调用此方法20      * 21      * @param request客户端请求对象22      * @param response 服务器响应对象23      * @throws ServletException 发生ServeltException时抛出24      * @throws IOException 发生IOException时抛出25      */26     public void doGet(HttpServletRequest request, HttpServletResponse response)27             throws ServletException, IOException {28         response.setContentType(CONTENT_TYPE); //设置服务器响应类型29         String province =request.getParameter("province");30         StringBuffer city = new StringBuffer("<citys>"); //记录返回XML串的对象31         List list = cityInit(); //获取城市列表32         if("gx".equals(province)) {33             for(int i=0;i<list.size();i++) {34                 city.append("<city>"+list.get(i)+"</city>");35             }            36         }37         city.append("</citys>");38         PrintWriter out = response.getWriter();39         out.print(city.toString());40         out.flush(); //输出流刷新41         out.close(); //关闭输出流42     }43 44     /*45      * 初始化城市46      */47     public List<String> cityInit() {48         List<String> cityList = new ArrayList<String>();49      //添加城市列表50         cityList.add("南宁");51         cityList.add("桂林");52         cityList.add("北海");53         cityList.add("河池");54         cityList.add("梧州");55         cityList.add("玉林");56     return cityList;57 }58 59     /**60      *当前Servelt的初始化方法. <br>61      *62      * @throws ServletException发生ServletExceptio时抛出63      */64     public void init() throws ServletException {65     }66 }

3.web.xml

 1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="2.5"  3     xmlns="http://java.sun.com/xml/ns/javaee"  4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 7 <servlet> 8     <description>This is the description of my J2EE component</description> 9     <display-name>This is the display name of my J2EE component</display-name>10     <servlet-name>CityServlet</servlet-name>11     <servlet-class>wen.CityServlet</servlet-class>12   </servlet>13   <servlet-mapping>14     <servlet-name>CityServlet</servlet-name>15     <url-pattern>/servlet/CityServlet</url-pattern>16   </servlet-mapping>17   <welcome-file-list>18     <welcome-file>index.jsp</welcome-file>19   </welcome-file-list>20 </web-app>

 

Ajax制作二级联动下拉列表框


联系
我们