Ajax案例---实现级联列表

痛定思痛。 2024-03-22 17:21 64阅读 0赞

**目录**

Ajax案例---实现级联列表

代码：

select.html

List.java

效果：

--------------------

## Ajax案例---实现级联列表 ##

### 代码： ###

*  #### select.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>级联列表</title>
        <style>
            #body_style {
    
                background-color: #c7f5db;
            }
    
            #myDiv {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                font-size: medium;
                border: 2px solid #28e5d8f0;
                padding: 28px 30px;
                background: #a1eec5;
                width: 350px;
                border-radius: 25px;
                -moz-border-radius: 25px;
            }
        </style>
      <script type="text/javascript" src="js\ajax.js"></script>
      <script type="text/javascript">
        function refresh(){
         let p= document.getElementById("prov").value;
         let city=document.getElementById("city");
         if(p==""){
           city.options.length=0;
           city.options.add(new Option("---请选择城市---"))
         }else {
           let url="list";
           let params="proc="+p;
           sendRequest(url,params,'POST',show);
         }
        }
        function show(){
          let city=document.getElementById("city");
          if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
              let cityList=httpRequest.responseText.split("、");
              let cityNum=cityList.length;
              city.options.length=0;
              for(let i=0;i<cityNum;i++){
                city.options.add(new Option(cityList[i]));
              }
            }
          }
        }
      </script>
    </head>
    <body id="body_style">
    <div id="myDiv">
        <form action="">
    
            <select name="prov" id="prov" onchange="refresh();">
                <option value="">---请选择省份---</option>
                <option value="广东">广东</option>
                <option value="山东">山东</option>
                <option value="江苏">江苏</option>
            </select>
    
            <select name="city" id="city">
                <option>---请选择城市---</option>
            </select>
        </form>
    </div>
    </body>
    </html>

*  #### List.java ####

package com.li;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Set;
    
    @WebServlet("/list")
    public class List extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            Map<String,String> pm=new HashMap<String,String>();
            pm.put("广东","深圳市、广州市、湛江市、珠海市、东莞市、佛山市、中山市、惠州市、汕头市、江门市、肇庆市、梅州市、茂名市、阳江市、清远市、韶关市、揭阳市、汕尾市、潮州市、河源市、云浮市");
            pm.put("山东","济南市、青岛市、淄博市、枣庄市、东营市、烟台市、潍坊市、济宁市、泰安市、威海市、日照市、滨州市、德州市、聊城市、临沂市、菏泽市、莱芜市");
            pm.put("江苏","南京市、无锡市、徐州市、常州市、苏州市、南通市、连云港市、淮安市、盐城市、扬州市、镇江市、泰州市、宿迁市");
            response.setContentType("text/html;charset=UTF-8");
            request.setCharacterEncoding("UTF-8");
            PrintWriter out=response.getWriter();
            String s1=request.getParameter("proc");
            out.println(pm.get(s1));
        }
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request,response);
        }
    }

### 效果： ###

![94efebba025a4a51aea7b9ff72147072.png][]

![c2dcbf3bc5cd4f36b9f0b85a81010243.png][]

[94efebba025a4a51aea7b9ff72147072.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/935286dd8611434a873f26c73b3bc166.png
[c2dcbf3bc5cd4f36b9f0b85a81010243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7f1546925aeb4e91841e043214fcd7ab.png