AJAX实现二级联动

最新推荐文章于 2022-01-19 22:31:41 发布

会写代码的狗

最新推荐文章于 2022-01-19 22:31:41 发布

阅读量1.2k

点赞数 1

分类专栏： JAVA 文章标签： ajax 二级联动

本文链接：https://blog.csdn.net/qq_33210523/article/details/72639252

版权

JAVA 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过AJAX实现二级联动,先动态获取一级下拉列表,通过Onchange()事件,异步查询二级下拉列表内容,把内容写进标签,存入二级下拉列表中

一级下拉列表动态获取列表内容

	@ResponseBody
	@Permission("ST1000")
	@RequestMapping("/editParksite")
	public String editPosOperator(ParkingsiteVO parkingsiteVO ) {
		boolean rlt = false;
		//通过id查询表,看有没有数据,有就是编辑需要回显数据,没有就是添加
		ParkingsiteVO selectParkingsiteById = parkingSiteService.selectParkingSiteById(parkingsiteVO.getParkingid());
		if ( selectParkingsiteById != null ) {
			Date now = new Date(); 
			SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//可以方便地修改日期格式
			String uptime = dateFormat.format( now ); 
			parkingsiteVO.setUpdatetime(uptime);
			rlt = parkingSiteService.updateParksiteById(parkingsiteVO);
		}else{
			Date now = new Date(); 
			SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//可以方便地修改日期格式
			String addtime = dateFormat.format( now ); 
			parkingsiteVO.setAddtime(addtime);
			
			parkingsiteVO.setUpdateway("Unkonwn");
			
			rlt = parkingSiteService.insertParkingSite(parkingsiteVO);
		}
		return callbackSuccess(rlt);
	}

HTML页面获取Model域中的对象展示一级下拉列表

<div class="hr-line-dashed"></div>
         <div class="form-group"><label class="col-sm-2 control-label">选择区域</label>
            <div class="col-sm-10">
            <select name="areacode" class="inputblue" id="area" style="width: 388px;height:35px;" 
            onchange="selectSiteByAreacode(this.options[this.options.selectedIndex].value)">
           	 #if($msg)//判断是添加还是编辑(添加没有信息,编辑需要回显数据)
            <option >请选择</option>//设置默认下拉选项
            	#foreach($aaaa in $AreaList)//Velocity模板循环model域对象
            <option  value="$!{aaaa.areacode}">$!{aaaa.areaname}</option>
            	#end
            #else
            <option value="$!{parkingsiteVO.areacode}">${parkingsiteVO.areaname}</option>
            	#foreach($aaaa in $AreaList)
	            	#if($parkingsiteVO.areacode != $aaaa.areacode)
            <option value="$!{aaaa.areacode}">$!{aaaa.areaname}</option>
	            	#end
	           	 #end
           	#end
            </select>
            </div>
        </div>

在一级下拉列表中设置Onchange事件
并给事件传参(this.options[this.options.selectedIndex].value 获取当前下拉列表中被选中列的value值)

  <select name="areacode" class="inputblue" id="area" style="width: 388px;height:35px;" onchange="selectSiteByAreacode(this.options[this.options.selectedIndex].value)">

在JS中实现Onchange事件通过AJAX异步查询
把查询结果通过循环插入二级下拉列表当中

function selectSiteByAreacode(id) {
   	 $.ajax({
        	url: "#springUrl('/st/parksite/selectSiteByAreacode')",
            data: {"id":id}, 
            async: false, 
            type: "POST",
            success: function(result){
            	str ='<option value="">请选择</option>';//先给个默认选项
              	$("#site").html(str);
            	for (var i=0;i<result.length;i++) {//循环添加下拉选项
					str+='<option value="'+result[i].id+'">'+result[i].sitename+'</option>';
				}
			 	$("#site").html(str);
            } 
    }); 
}

异步查询调用的URL,返回查询结果

	@ResponseBody
	@Permission("ST1000")
	@RequestMapping("/selectSiteByAreacode")
	public List<SiteVO> selectSiteByAreacode(String id ) {
		List<SiteVO> selectSiteByAreacode = siteService.selectSiteByAreacode(id);
		return selectSiteByAreacode;
	}

HTML页面二级下拉列表标签

 <div class="hr-line-dashed"></div>
         <div class="form-group"><label class="col-sm-2 control-label">选择路段</label>
            <div class="col-sm-10">
            <select name="siteid" class="inputblue"  id="site"  style="width: 388px;height:35px;" >
           	 #if($msg)//判断添加还是编辑页面
            <option >请选择</option>//默认选项
            #else
            <option value="$!{parkingsiteVO.siteid}">${parkingsiteVO.sitename}</option>//数据回显
           	#end 
            </select>
            </div>
        </div>

*本文仅个人学习记录使用,如有错误或者不妥,欢迎指正批评