jquery、java前后台交互实现select二级联动

       在表单的开发过程中，有时会需要实现select的二级联动，如果涉及到大型的系统项目，select的选项会存储在后台数据库当中，这就需要前后端交互来获取持久化数据并展示，本文详细介绍使用jquery和java来实现select标签的二级联动。

       首先设计前端select控件。我们在设计数据库表时，为每个具体类别设置了ID和父ID，每个option标签中data-id的值就是每个具体类别的ID。

<select class="select" id="productCplb1" name="productCplb1" onchange="cplb()"">
         <option value= "" data-id="0">请选择产品类别(一級)</option>
</select>
          	    
<select class="select" id="productCplb2" name="productCplb2">
          <option value= "" data-id="0">请选择产品类别(二級)</option>
</select> 

       首次刷新页面，只获取产品类别（一级）的下拉列表，并为其设置onchange事件。当选中某个一级产品类别时，异步获取并刷新产品类别（二级）的下拉列表。获取select下拉列表不需要重新刷新整个表单页面，因此使用异步ajax与后台交互。将已选中option的data-id的值作为父ID传给后台，获取该ID下的子类别后在下一级select标签中展示。

//首次刷新页面获取一级产品类别列表
function cplbs(){
        	$.ajax({
        		   async:false,
        		   type:"post",
        		   url:"/member/selectionzgx_cplb.jspx",
        		   data:{id:1},  //一级产品类别的父ID
        		   success:function(data){
        			   $("#productCplb1").empty();
      					$("#productCplb1").append("<option value= '' data-id='0'>请选择产品类别(一級)</option>")
      					for(var i=0;i<data.length;i++){
      						$("#productCplb1").append("<option value='"+data[i].cname+"' data-id='"+data[i].id+"'>"+data[i].cname+"</option>");
      					} 
        		   }
        	   })
           }

//选中一级产品类别后，获取并刷新二级产品类别列表
function cplb(){
              var options=$("#productCplb1 option:selected");
              var value=options.data("id");
              $.ajax({
       				async:false,
       				type:"post",
       				url:"/member/selectionzgx_cplb.jspx",
       				data:{id:value}, //二级产品类别的父ID
       				success:function(data){
       					$("#productCplb2").empty();
       					$("#productCplb2").append("<option value= '' data-id='0'>请选择产品类别(二級)</option>")
       					for(var i=0;i<data.length;i++){
       						$("#productCplb2").append("<option value='"+data[i].cname+"' data-id='"+data[i].id+"'>"+data[i].cname+"</option>");
       					}
       				}
       			}) 
       	}

       在后台为ajax请求设置查询函数。由于使用SpringMVC+Hibernate框架，数据库表和实体类之间的映射配置以及dao层、service层的编写在此省略，有兴趣的同学可以查看我之前有关数据增删改查思路的简易梳理，在此只展示controller层的查询响应函数。查询到结果后，使用json字符串返回。

/**
	 * 产品类别二级联动，返回上一级下的子分类
	 * @param id
	 * @param request
	 * @param response
	 * @param model
	 * @throws JSONException
	 */
	@RequestMapping(value="/member/selectionzgx_cplb.jspx", method=RequestMethod.POST)
	public String cplb(Integer id, HttpServletRequest request, HttpServletResponse response,
			ModelMap model) throws JSONException {
		Integer pageNo=null;
        //给定父ID，获取下一级子分类
		Pagination pagination=cmsPrizeMng.getPrizeByParentId(id, cpn(pageNo), 200);
		List<CmsPrize> list=(List<CmsPrize>) pagination.getList();
		JSONArray array=new JSONArray();
		for(CmsPrize prize:list) {
			JSONObject obj=new JSONObject();
			obj.put("id", prize.getId());
			obj.put("cname",prize.getCname());
			array.put(obj);
		}
		return array.toString();
	}

          至此，通过前后端交互实现了select标签的二级联动。