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();
	    })