省市級聯在web前端用戶注冊使用非常廣泛。Ajax異步刷新省市級聯。如圖：選擇不同的區，自動加載相應的街。

    <TD class=field>位　　置：</TD>    <TD>區：        <SELECT class=text name="district_id"  id="district_id">            <option selected value="請選擇">請選擇</option>            <c:forEach var="district" items="${requestScope.district}">                <OPTION value="${district.id }">${district.district_name }</OPTION>            </c:forEach>        </SELECT>         <span id="street_span">        街：        <SELECT class=text name=street_id id='street_id'>        <c:forEach var='street' items='${sessionScope.street}'><OPTION value='${street.street_name}'>${street.street_name}</OPTION></c:forEach>            </SELECT> </span>        </TD>    </TR>

  //核心代碼（一定要導入jquery-1.8.3.js架包）<script type="text/javascript">      //聲明全局對象       var xmlhttp;              //創建xmlhttpRequest對象       function createXMLHttPRequest(){                      if(window.XMLHttpRequest){               xmlhttp=new XMLHttpRequest();           }else if(window.ActiveObject){               xmlhttp=new ActiveObject("Microsoft.XMLHTTP");           }                  }       function doAjax(url){            //初始化XMLHttpRequest            createXMLHttpRequest();            //判斷對象是否初始化成功            if(xmlhttp!=null){//說明初始化正常                //請求服務器                xmlhttp.open("post",url,true);                //指定回調函數                xmlhttp.onreadystatechange=successresponse;                xmlhttp.send(null);            }    };       //指定回調函數       function successresponse(){           //判定響應狀態           if(xmlhttp.readyState==4){               if(xmlhttp.status==200){                   chuli(xmlhttp.responseText);               }           }       };      //初始化加載jQuery      window.onload=function(){          var count=$("#district_id option").length;          for(var i=0;i<count;i++){                       if( $("#district_id ").get(0).options[i].selected == true && $("#district_id ").get(0).options[i].value=="請選擇"){                     $("#street_span").addClass("removeStreet_span");                 };             };      };          /*ID選擇器*/    $(document).ready(function() {        $("#district_id").change(function(){          var count=$("#district_id option").length;          for(var i=0;i<count;i++){                       if( $("#district_id ").get(0).options[i].selected == true && $("#district_id ").get(0).options[i].value=="請選擇"){                     alert("請選擇區");                     $("#street_span").addClass("removeStreet_span");                 }else if($("#district_id ").get(0).options[i].selected == true){                     var district_value=$("#district_id").get(0).options[i].value;                     $("#street_span").removeClass("removeStreet_span");                     //請求異步刷新：以請求地址作為參數傳遞                    doAjax("../SelectStreetServlet?id="+district_value);                 };             };        });    });                function chuli(data){        var json = eval("("+data+")");        var txt = "";        for(var i = 0;i<json.jie.length;i++){            txt = txt+"<option value="+json.jie[i].name+">"+json.jie[i].name+"</option>";        }        $("#street_id").html(txt);   };      </script>

相應的com.msl.Servlet頁面

package com.msl.Servlet;import java.io.IOException;import java.io.Writer;import java.util.Iterator;import java.util.Set;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.hibernate.Session;import com.msl.HibernateUtil.HibernateUtil;import com.msl.entity.District;import com.msl.entity.Street;public class SelectStreetServlet extends HttpServlet {    /**     *      */    private static final long serialVersionUID = -3989943574735454346L;    /**     * Destruction of the servlet. <br>     */    public void destroy() {        System.out.println("servlet");    }    /**     * The doGet method of the servlet. <br>     *     * This method is called when a form has its tag value method equals to get.     *      * @param request the request send by the client to the server     * @param response the response send by the server to the client     * @throws ServletException if an error occurred     * @throws IOException if an error occurred     */    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doPost(request,response);//        response.setContentType("text/html");//        PrintWriter out = response.getWriter();//        out.println("<!DOCTYPE HTML PUBLIC /"-//W3C//DTD HTML 4.01 Transitional//EN/">");//        out.println("<HTML>");//        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");//        out.println("  <BODY>");//        out.print("    This is ");//        out.print(this.getClass());//        out.println(", using the GET method");//        out.println("  </BODY>");//        out.println("</HTML>");//        out.flush();//        out.close();    }    /**     * The doPost method of the servlet. <br>     *     * This method is called when a form has its tag value method equals to post.     *      * @param request the request send by the client to the server     * @param response the response send by the server to the client     * @throws ServletException if an error occurred     * @throws IOException if an error occurred     */    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {//        request.setCharacterEncoding("UTF-8");//        int id=Integer.parseInt(request.getParameter("id"));//        //        StreetBiz sz=new StreetBizImpl();//        List<Street> street=sz.selectStreet(id);//        int status=0;//        if(street.size()>0){//            status=1;//        }//        request.getSession().setAttribute("street", street);//        response.setContentType("text/html");//        response.setCharacterEncoding("UTF-8");//        PrintWriter out = response.getWriter();//        out.println(status);//        out.flush();//        out.close();        request.setCharacterEncoding("UTF-8");        response.setCharacterEncoding("UTF-8");        int id=Integer.parseInt(request.getParameter("id"));        Session session=HibernateUtil.getSession();        District dis=(District) session.get(District.class, id);        Set<Street> st=dis.getSet();        Iterator<Street> it=st.iterator();        StringBuffer s = new StringBuffer("{'jie':[");                for(int j = 1;it.hasNext();j++){                        Street s1 = it.next();                        s.append("{'name':'"+s1.getStreet_name()+"'}");                        if(j<st.size()){                s.append(",");            }        }                s.append("]}");        Writer out =  response.getWriter();        out.write(s.toString());    }    /**     * Initialization of the servlet. <br>     *     * @throws ServletException if an error occurs     */    public void init() throws ServletException {        System.out.println("servlet");    }}

您可以通過點擊 右下角 的按鈕 來對文章內容作出評價, 也可以通過左下方的 關注按鈕 來關注我的博客的最新動態。 如果文章內容對您有幫助, 不要忘記點擊右下角的 推薦按鈕 來支持一下哦   如果您對文章內容有任何疑問, 可以通過評論或發郵件的方式聯系我: 2276292708@QQ.com如果需要轉載，請注明出處，謝謝！！