Ajax實現二級聯動菜單

來源:互聯網
上載者:User

index.jsp:

<%@ page language="java" pageEncoding="UTF-8"%><html>    <head>        <title>二級菜單聯動示範</title>        <script type="text/javascript">    var req;    window.onload=function()    {//頁面載入時的函數    }        function Change_Select(){//當第一個下拉框的選項發生改變時調用該函數      var province = document.getElementById('province').value;      var url = "select?id="+ escape(province);      if(window.XMLHttpRequest){        req = new XMLHttpRequest();      }else if(window.ActiveXObject){        req = new ActiveXObject("Microsoft.XMLHTTP");      }      if(req){        req.open("GET",url,true);         //指定回呼函數為callback        req.onreadystatechange = callback;        req.send(null);      }    }    //回呼函數    function callback(){      if(req.readyState ==4){        if(req.status ==200){          parseMessage();//解析XML文檔        }else{          alert("不能得到描述資訊:" + req.statusText);        }      }    }    //解析返回xml的方法    function parseMessage(){      var xmlDoc = req.responseXML.documentElement;//獲得返回的XML文檔      var xSel = xmlDoc.getElementsByTagName('select');      //獲得XML文檔中的所有<select>標記      var select_root = document.getElementById('city');      //獲得網頁中的第二個下拉框      select_root.options.length=0;      //每次獲得新的資料的時候先把每二個下拉架構的長度清0            for(var i=0;i<xSel.length;i++){        var xValue = xSel[i].childNodes[0].firstChild.nodeValue;        //獲得每個<select>標記中的第一個標記的值,也就是<value>標記的值        var xText = xSel[i].childNodes[1].firstChild.nodeValue;        //獲得每個<select>標記中的第二個標記的值,也就是<text>標記的值                var option = new Option(xText, xValue);        //根據每組value和text標記的值建立一個option對象                try{          select_root.add(option);//將option對象添加到第二個下拉框中        }catch(e){        }      }    }          </script>    </head>    <body>        <div align="center">            <form name="form1" method="post" action="">                <table width="70%" border="0" cellspacing="0" cellpadding="0">                    <tr>                        <td align="center">                            二級聯動樣本                        </td>                    </tr>                    <tr>                        <td>                            <select name="province" id="province" onChange="Change_Select()">                                <!--第一個下拉式功能表-->                                <option value="0">                                    請選擇                                </option>                                <option value="1">                                    北京                                </option>                                <option value="2">                                    天津                                </option>                                <option value="3">                                    山東                                </option>                            </select>                            <select name="city" id="city">                                <!--第二個下拉式功能表-->                                <option value="0">                                    請選擇                                </option>                            </select>                        </td>                    </tr>                    <tr>                        <td>                        </td>                    <tr>                </table>            </form>        </div>    </body></html>

SelectServlet:

package com;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** *  * @author zdw * */public class SelectServlet extends HttpServlet{    private static final long serialVersionUID = 1L;    public SelectServlet()    {        super();    }    public void destroy()    {        super.destroy();    }    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException    {//        response.setCharacterEncoding("GBK");        response.setContentType("text/xml");        response.setHeader("Cache-Control", "no-cache");        request.setCharacterEncoding("GBK");        response.setCharacterEncoding("UTF-8");        String targetId = request.getParameter("id").toString();        System.out.println(targetId);        // 獲得請求中參數為id的值        String xml_start = "<selects>";        String xml_end = "</selects>";        String xml = "";        if (targetId.equalsIgnoreCase("0"))        {            xml = "<select><value>0</value><text>請選擇</text></select>";        } else if (targetId.equalsIgnoreCase("1"))        {            xml = "<select><value>1</value><text>昌平</text></select>";            xml += "<select><value>2</value><text>丰台</text></select>";            xml += "<select><value>3</value><text>海澱</text></select>";            xml += "<select><value>4</value><text>朝陽</text></select>";        } else if (targetId.equalsIgnoreCase("2"))        {            xml = "<select><value>1</value><text>塘沽區</text></select>";            xml += "<select><value>2</value><text>漢沽區</text></select>";            xml += "<select><value>3</value><text>大港區</text></select>";            xml += "<select><value>4</value><text>東麗區</text></select>";        } else        {// 如果是3,則返回下面的字元            xml = "<select><value>1</value><text>濟南</text></select>";            xml += "<select><value>2</value><text>青島</text></select>";            xml += "<select><value>3</value><text>淄博</text></select>";            xml += "<select><value>4</value><text>棗莊</text></select>";        }        String last_xml = xml_start + xml + xml_end;        response.getWriter().write(last_xml);    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException    {        doGet(request, response);    }    public void init() throws ServletException    {    }}

web.xml:

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">    <servlet>        <servlet-name>SelectServlet</servlet-name>        <servlet-class>com.SelectServlet</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>SelectServlet</servlet-name>        <url-pattern>/select</url-pattern>    </servlet-mapping>    <welcome-file-list>        <welcome-file>index.jsp</welcome-file>    </welcome-file-list></web-app>

源碼下載

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.