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

朴灿烈づ我的快乐病毒、 2022-12-27 09:12 178阅读 0赞

![format_png][]

![format_png 1][]

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

先来看看运行效果：

![format_png 2][]

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

接下来看看怎么实现？

# 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大赛一等奖颁奖][PPT]

[2020-12-08][PPT]

[![format_png 3][] ][PPT]

[PPT大赛二等奖颁奖][PPT 1]

[2020-12-08][PPT 1]

[![format_png 4][] ][PPT 1]

[PPT大赛三等奖颁奖][PPT 2]

[2020-12-08][PPT 2]

[![format_png 5][] ][PPT 2]

[今天你们表现的真棒！！！][Link 1]

[2020-12-07][Link 1]

[![format_png 6][] ][Link 1]

[学生一天的生活状态缩影][Link 2]

[2020-12-06][Link 2]

[![format_png 7][] ][Link 2]

[我们漫长的人生旅途中，态度永远决定一切！！！][Link 3]

[2020-12-05][Link 3]

[![format_png 8][] ][Link 3]

[让优秀成为一种习惯！][Link 4]

[2020-12-04][Link 4]

[![format_png 9][] ][Link 4]

![format_png 10][]

![format_png 11][]

点分享

![format_png 12][]

点点赞

![format_png 13][]

点在看

[format_png]: /images/20221120/6baf7d96ea904bbf9528844f31eb1f0e.png
[format_png 1]: /images/20221120/7ab20d3cb0a24cbe804d7df8a2a26eaf.png
[format_png 2]: /images/20221120/62f48be6d50f4ec8b96ff0ffc98d5f5f.png
[PPT]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe335a0f86a23f0b02ff75fda8c8619ada6dd15650d3aedae4e10b47f39fd6a6b7130e88d&idx=1&mid=2247498196&scene=21&sn=5ac706b5d882394fab65cd2e658b7b30#wechat_redirect
[format_png 3]: /images/20221120/72676074ac53488893ae52fe53cf9112.png
[PPT 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe335a0f86a23fe95c014f93c7bc022998f0f401714e27b50f98b73d72cdbadf82a317557&idx=2&mid=2247498196&scene=21&sn=6019dcfd9bb194e74684ce5e3280ab66#wechat_redirect
[format_png 4]: /images/20221120/9cce76cf43ae44a68993f598ac403bf8.png
[PPT 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe335a0f86a235654e697030b65156292bdec94faa3b734fc961d7792a3b2e6c933c83597&idx=3&mid=2247498196&scene=21&sn=74dc1cb9f0f8fff9d2e4cf1f0e82678a#wechat_redirect
[format_png 5]: /images/20221120/f4801d3491f74fd59543a9de42cad258.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe32ea0f86a3819cf5cd138de787a341f01092d43a6c7ed2234e703870ba2c920ebb8f37e&idx=1&mid=2247498191&scene=21&sn=3680dca9ee9d7a4706f09859c548746b#wechat_redirect
[format_png 6]: /images/20221120/34142a1a2c9f47f0945f3a5939d74d8c.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe34ba0f86a5dd5fa280300aea454a3722a8a926c82482131ce658dda1ab5f47a33945136&idx=1&mid=2247498154&scene=21&sn=67429667b429fa4dcdbfbf46e022bd48#wechat_redirect
[format_png 7]: /images/20221120/533a191d2b3b47f88b298f26d5b26a6d.png
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe346a0f86a50c83856f06ea50e484839a3d2ade9fb02f379b9d5910e504cb931b8c500cd&idx=1&mid=2247498151&scene=21&sn=b155bd05d1449de365146797448d29d5#wechat_redirect
[format_png 8]: /images/20221120/fa2f65741ec842729e4d36e5d99bd466.png
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe345a0f86a536439ef1a1e50d5433d8e653afdfdb2445d664841b0b59aa2e60a5cc308cb&idx=1&mid=2247498148&scene=21&sn=3dbd31469659ead9844b0a6ba5865e42#wechat_redirect
[format_png 9]: /images/20221120/ff902406d8ba45f4aa5331ca3026525d.png
[format_png 10]: /images/20221120/18c8b97568b2465b9de7b62150de924b.png
[format_png 11]: /images/20221120/8ecfc5f8fd194432b64501a0a38ab5a7.png
[format_png 12]: /images/20221120/d7541ae874d1406bb2f9fdb0bb3a0ea6.png
[format_png 13]: /images/20221120/487ee044987b4ffe947a7f32f6a69d09.png