ajax实现下拉框联动

          spring mvc+bootstrap


           最近在做一个新闻不发布网站,网站栏目需要实现下拉框联动,因为没有用到前端框架,因此需要自己来写,废话不多说,思路是,跳转到新闻发布页面,需要初始化一级目录。

        @RequestMapping("/release")
        public String release(HttpServletRequest request) {
	
		//一级目录
		request.setAttribute("pClassifyList", classifyService.getFirLevDire());
		return "/admin/news/release";
	}

一级目录需要写个onchange 事件,影响二级目录的改变。

                <div class="form-group">
			<!-- 一级目录 -->
			<label class="col-sm-2 control-label">所属栏目:</label>
	        	<div class="col-xs-2">
	    		<select class="form-control" name="classifys" id="classifys" onChange="getNextClassify()">
	  			<c:forEach var="classify" items="${pClassifyList}" varStatus="s">
					<option value="${classify.id}">${classify.name}</option>
				</c:forEach>
	  			</select>
			</div>
			<!-- 二级目录 -->
			<div class="col-xs-2">
	    		<select class="form-control" name="classifyid" id="classifyid">
					
	  			</select>
			</div>
	         </div>

方法的js写法,我们需要把一级目录的主键传到后台,根据一级目录主键查询二级目录id和name,注意每次需要清空二级目录,传过来的是json格式

            //下拉框连动
	    function getNextClassify() {
			//获取下拉框主键
			var classifyId=$("#classifys").find('option:selected').val();
			$("#classifyid").empty();     //清空二级目录 
			var classNext=$("#classifyid");
			$.ajax({  
                          type: "post",  
                          contentType:"application/json",  
                       url : "${base}/admin/news/getNextClassfy.htm?classifyId="+classifyId, 
                       success: function (data) {   
                	    var data = eval('(' + data + ')'); 
                	    if(data.length!="" && data.length!=null){ 
                     	      for ( var i = 0; i < data.length; i++) {
                     			classNext.append("<option value="+data[i].id+">"+data[i].name+"</option>");
                     	      }
                	     }else{
                		classNext.append("<option value="+classifyId+">---无---</option>");
                	    }
           		       }   
           	        }); 
		}
调用后台的java方法,我们把一条记录当作一个对象,把对象放在list里然后传到前台

       /**
	 * 
	* 方法名: getJson
	* 方法作用: 获取二级目录值
	* 创建人:Wu Feng
	* 创建时间:2016-10-23 下午08:53:50   
	* @param @param request
	* @param @param classify
	* @param @return
	* @param @throws Exception    
	* 返回值类型: List<Classify>    
	* @throws
	 */
    @ResponseBody 
    @RequestMapping("/getNextClassfy")  
    public List<Classify> getJson(HttpServletRequest request,Classify classify) throws Exception {  
	String classfyId=request.getParameter("classifyId");
        classify.setId(Integer.valueOf(classfyId));
        List<Classify> classifys=classifyService.getSecDire(classify);
        return classifys;
    }  

        /**
	 * 
	* 方法名: getSecDire
	* 方法作用: 二级目录
	* 创建人:Wu Feng
	* 创建时间:2016-10-23 下午07:45:25   
	* @param @param classify
	* @param @return    
	* 返回值类型: List<Classify>    
	* @throws
	 */
	public List<Classify> getSecDire(Classify classify){
		return classifyDao.getSecDire(classify);
	}
/**
	 * 
	* 方法名: getSecDire
	* 方法作用:获得二级目录
	* 创建人:Wu Feng
	* 创建时间:2016-10-23 下午07:17:19   
	* @param @return    
	* 返回值类型: List<Classify>    
	* @throws
	 */
	public List<Classify> getSecDire(Classify classify){
		String sql="select * from t_classify where isuse = 1 and pid="+classify.getId()+" order by orderindex asc";
		List<Classify> list = jdbcTemplate.query( sql, ParameterizedBeanPropertyRowMapper.newInstance(Classify.class));
		return list;
	}

最后在每次界面加载的时候,j调用onchange事件

            //初始化就调用getNextClassify方法
	    $(function () {
	    	getNextClassify();
	    })




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值