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