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

前言：在某些电商网站或者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