下拉框表单联动案例-白红宇的个人博客

下拉框表单联动案例

发布日期：2021-05-09 04:07:19 浏览次数：18 分类：博客文章

本文共 2830 字，大约阅读时间需要 9 分钟。

这几天忙着做学校的项目，感觉好久没有更新博客了，来整理一下。

由于要实现的功能是表单联动，只能自己去写ajax来实现提交给后台接口了，好久没有写前端，好多东西都忘记了，只能可怜巴巴的用原生的js去实现。

特此总结一下：首先要使用SpringMVC来接收和返回JSON格式的数据，必须要先配置：

在spring-mvc.xml加上如下配置：

由于使用的是maven项目，因此需要加上相关dependency：

1         
    
      2             
     
      org.codehaus.jackson
      3             
     
      jackson-core-lgpl
      4             
     
      1.8.1
      5         
     6  7         
    
      8             
     
      org.codehaus.jackson
      9             
     
      jackson-mapper-lgpl
     10             
     
      1.8.1
     11

在controller里这样写：

1     // 区域表单联动查询2     @RequestMapping(value = "/basicinfo/area/getChild.action" , method = {RequestMethod.POST })3     public @ResponseBody List getChild(@RequestBody Area area ) {4         System.out.println(area.getParentId()+"-----");5         HashMap
    
      map = new HashMap
     
      ();6         map.put("parentId", area.getParentId());7         List
       dataList = areaService.find(map);8         return dataList;9     }

注意：前台ajax提交过来的参数映射进被@RequestBody注解的Area类，因此，ajax里的参数名称必须要和Area类里的参数名称一致，否则会出现HTTP请求415，类型不支持的情况。返回到list数据也要加上注解。

在js里应该这样写：

1 //val 提交隐藏域，并且调用ajax去联动第二个表单 2     function setFirstParent(val) { 3         var element = document.getElementById("fp"); 4         element.value = val; 5         var param = { 6             "parentId" : val 7         }; 8         var select = document.getElementById("secondSelect"); 9         //先清空，在添加一个请选择10         $("#secondSelect").find("option").remove();11         var option = document.createElement("option");12         option.setAttribute("value", "0");13         option.appendChild(document.createTextNode("--请选择--"));14         select.appendChild(option);15         $.ajax({17                     url : "${pageContext.request.contextPath}/basicinfo/area/getChild.action", //请求地址18                     type : "POST", //请求方式19                     data : JSON.stringify(param), //请求参数20                     dataType : "json",21                     contentType : 'application/json;charset=utf-8', //指定为json类型22                     success : function(response) {23                         for (var i = 0; i < response.length; i++) {24                             var option = document.createElement("option");25                             option.setAttribute("value", response[i].id);   //添加value26                             option.appendChild(document27                                     .createTextNode(response[i].areaName));   //添加显示的内容28                             select.appendChild(option);29                         }30                     },31                     fail : function(status) {32                         alert("接口调用异常");33                     }34                 });35     }

在第一个下拉菜单的onchange事件里调用相关的参数来查询第二个下拉菜单，注意在联动查询之前，需要先清空当前菜单的options然后再添加进去。

上一篇：Redis缓存热点数据案例

下一篇：jersey实现文件下载

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章