如何实现省市关联的下拉列表

前言：在某些电商网站或者APP中，通常填写地址时，会有这样的功能：当我们选择的省份是“山东”时，则城市的下拉列表里所展示的便是山东的城市，当选择的省份是“山西”时，城市的下拉列表所展示的便是山西的城市，今天，我们就来看看，这样的功能通过java是如何实现的？

先来看看运行效果：

这是一个简单的案例，如果还有别的需求，可以自行扩展。

接下来看看怎么实现？

01

Jsp页面

首先，看运行效果，可得需要三个下拉列表，第一个是省份，第二个是城市，第三个则是景点，三个下拉列表的代码如下：

省份：<select id="sheng">
         <option value="请选择">请选择</option>
           <option value="山东">山东</option>
           <option value="山西">山西</option>
       </select>
       城市：<select id="shi"></select>
    景点：<select id="jing"></select>

代码解析：先在省份的下拉列表中初始化了两个省份，山东和山西（此处只举这两个省，别的可以下来自行补充），由于我们并不知道用户会选择哪个省份，所以姑且让其空着，待会儿动态的添加，景点也是一样的道理。

02

Ajax关键代码

当然，该功能使用js也可以实现，只是今天正好看到了ajax，所以就用ajax结合jquery来实现。下面是关键代码：

$("#sheng").change(function(){
          //获取当前选中的省份
          var sheng = $("#sheng").val();
          $.getJSON("AjaxServlet",
                "tag=jsonTest&&county="+sheng,
                function(data){
                  $("#shi").html("<option>请选择</option>");
                  for(var i in data){
                    $("#shi").append("<option value='"+data[i]+"'>"+data[i]+"</option>");
                  }
                }
          );
        });

当改变省份的下拉列表时，执行后面的操作，初始化城市下拉列表。

public void jsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{
    PrintWriter out = response.getWriter();
    String county = request.getParameter("county");
    List<String> list = new ArrayList<String>();
    if(county.equals("山东")){
      list.add("济南");
      list.add("德州");
      list.add("齐河");
      list.add("日照");
      list.add("烟台");
      list.add("威海");
      list.add("青岛");
      list.add("聊城");
    }else if(county.equals("山西")){
      list.add("吕梁");
      list.add("太原");
      list.add("大同");
      list.add("榆次");
      list.add("晋城");
      list.add("临汾");
      list.add("汾阳");
      list.add("柳林");
    }
    String jsonStr = JSON.toJSONString(list);
    out.print(jsonStr);
    
  }

代码解析：先获取到用户选择的省份，然后通过ajax提交到Servlet中，在Servlet中构建该省份的城市集合，最后转换成json格式的收据传回json页面中，在ajax的回调函数中，将json数据解析添加至城市的下拉列表中。

03

Servlet中的关键代码

根据城市获取景点也是同样的原理，jsp中的关键代码如下：

//当改变城市的下拉列表时
        $("#shi").change(function(){
          //获取当前选中的是哪个城市
          var city = $("#add").val();
          $.getJSON(
            "AjaxServlet",
            "tag=city&&city="+city,
            function(data){
            $("#jing").html("<option>请选择</option>");
              for(var i in data){
                $("#jing").append("<option>"+data[i]+"</option>");
              }
            }
          );
        });

Servlet中的关键代码如下：

//获取景点
  public void getJingDian(HttpServletRequest request,HttpServletResponse response) throws IOException{
    PrintWriter out = response.getWriter();
    
    //获取城市
    String city = request.getParameter("city");
    Map<String, String> map = new HashMap<String, String>();
    if(city.equals("济南")){
      map.put("quan","大明湖");
      map.put("qian","千佛山");
      map.put("jing","省博物馆");
    }else if(city.equals("德州")){
      map.put("pa","德州扒鸡");
      map.put("pu","德州扑克");
    }
    String jsonObject = JSON.toJSONString(map);
    System.out.println(jsonObject);
    out.print(jsonObject);
    
  }

往期精彩

PPT大赛一等奖颁奖

2020-12-08