页面select 联动效果

最新推荐文章于 2020-09-03 15:14:30 发布

原创最新推荐文章于 2020-09-03 15:14:30 发布 · 339 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#select #联动 Ajax

工作总结专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JSP实现的下拉选框联动案例。通过前端JavaScript与后端Controller交互，根据子系统的不同选择动态填充父模块选项。文章提供了完整的JSP代码和Controller层方法。

JSP代码：两个select的下拉选框

<!-- 子系统 -->
<div class="row form-group">
   <label class="control-label col-md-2">
       <fmt:message key="module.subsystem" /></label>
	  <div class="controls col-md-10">
	     <form:select id="subsystemId" path="subsystemId"
                class="form-control " name="subsystemId" onchange="parentSelect()" />
	  </div>
</div>
 <!-- 父模块 -->
<div class="row form-group">
    <label class="control-label col-md-2">
       <fmt:message key="module.parentId" /></label>
	  <div class="controls col-md-10">
	     <form:select id="parentId" path="parentId" class="form-control "
		 name="parentId" />
	  </div>
</div>



<script>
        function parentSelect() {
            var subSystemId = $("select[name='subsystemId']").val();
            $.ajax({
                type : "get",
                url : "${baseUrl}/showParentGroupById?id=" + subSystemId,
                data : {},
                success : function(result) {
                    //清空下拉选框
                    $("select[name='parentId']").empty(); 
                    //加载下拉 
                    $.each(result, function(i, item) {
                        var ui = "<option value='" + item.id + "'>" + item.name
                                + "</option>"
                        $("select[name='parentId']").append(ui);
                    })
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>

ajax触发（可以是页面初始化，也可以是onclick触发，也可以是onchange触发）：

showGroup : function(baseUrl){
    $.ajax({
        type: "get",
        url: baseUrl,
        data: {},
        success: function (result) {
          $.each(result, function (i, item) {
             var ui = "<option value='" + item.id + "'>" + item.name + "</option>"
	     $("select[name='subsystemId']").append(ui);
          }) 
        },
        error : function() {    
             alert("异常！");    
        }  
      });
}

Controller层方法：

        @ResponseBody
	@RequestMapping(value = "showGroup", method = RequestMethod.GET)
	public List showGroup() {
		List<Subsystem> subSystemList = subsystemService.findAll();
		ArrayList<Map<String, Object>> subSystemlist = new ArrayList<Map<String, Object>>();
		for (int i = 0; i < subSystemList.size(); i++) {
			Subsystem subSystem = subSystemList.get(i);
			HashMap<String, Object> subSystemMap = new HashMap<String, Object>();
			subSystemMap.put("id", subSystem.getId());
			subSystemMap.put("name", subSystem.getName());
			subSystemlist.add(i, subSystemMap);
		}
		//添加请选择
		HashMap<String, Object> addSelectMap = new HashMap<String, Object>();
		addSelectMap.put("id", "");
		addSelectMap.put("name", "请选择");
		subSystemlist.add(0,addSelectMap);
		return subSystemlist;
	}