jquery实现ajax联动框

前台页面

<script type="text/javascript" src="${rc.contextPath}/js/jquery.select.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

      $("#rwflSelect").linkSelect({

      nodata:"none",

      required:true,

      firstUrl:'${rc.contextPath}/repair/loadCategory',

      secondUrl:'${rc.contextPath}/repair/loadSubCategory',

      firstValue:'$!{repair.categoryid}',//任务大类

      secondValue:'$!{repair.subcategoryid}'//人物小类

      }); 

      

  });

  </script>



<tr id="rwflSelect">

        <td width="100" class="t_r prten field_c">任务分类：</td>

        <td width="131"><select class="first" name='categoryid'></select> </td>

        <td width="10"></td>

        <td width="131"><select class="second" name="subcategoryid" disabled="disabled"></select></td>

      </tr>

附

jquery.select.js

/*

Ajax 三级联动

日期：2013-2-26



settings 参数说明

-----

firstUrl:一级下拉数据获取URL,josn返回

firstValue:默认一级下拉value

secondUrl:二级下拉数据获取URL,josn返回

secondValue:默认二级下拉value

thirdUrl:三级下拉数据获取URL,josn返回

thirdValue:默认三级下拉value

nodata:无数据状态

required:必选项

------------------------------ */

(function($){

    $.fn.linkSelect=function(settings){

        if($(this).size()<1){return;};

        // 默认值

        settings=$.extend({

            firstUrl:"js/city.min.js",

            firstValue:null,

            secondValue:null,

            thirdValue:null,

            nodata:null,

            required:true

        },settings);



        var box_obj=this;

        var first_obj=box_obj.find(".first");

        var second_obj=box_obj.find(".second");

        var third_obj=box_obj.find(".third");

        var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";



        var prepareSelectHtml=function(jsonArray){

            var temp_html=select_prehtml;

            $.each(jsonArray,function(index,row){

                temp_html+="<option value='"+row.value+"'>"+row.text+"</option>";

            });    

            return temp_html;

        };

        // 赋值二级下拉框函数

        var secondStart=function(){

            second_obj.empty().attr("disabled",true);

            third_obj.empty().attr("disabled",true);

            if(first_obj.val()==''){

                return;

            }

            $.getJSON(settings.secondUrl, { firstValue: first_obj.val(), time: new Date().getTime() }, function(jsonResult){

                if(!jsonResult.success){

                    if(settings.nodata=="none"){

                        second_obj.css("display","none");

                        third_obj.css("display","none");

                    }else if(settings.nodata=="hidden"){

                        second_obj.css("visibility","hidden");

                        third_obj.css("visibility","hidden");

                    };

                    return;

                }

                // 遍历赋值二级下拉列表

                second_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});

                thirdStart();                

            });

            



        };



        // 赋值三级下拉框函数

        var thirdStart=function(){

            third_obj.empty().attr("disabled",true);



            $.getJSON(settings.thirdUrl, { firstValue: first_obj.val(),secondValue:second_obj.val(), time: new Date().getTime() }, function(jsonResult){

                if(!jsonResult.success){

                    if(settings.nodata=="none"){

                        third_obj.css("display","none");

                    }else if(settings.nodata=="hidden"){

                        third_obj.css("visibility","hidden");

                    };

                    return;

                }

                // 遍历赋值三级下拉列表

                third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled",false).css({"display":"","visibility":""});

                thirdStart();                

            });

        };



        var init=function(){

            // 遍历赋值一级下拉列表

            $.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){

                if(!jsonResult.success){

                    return;

                }

                // 遍历赋值一级下拉列表

                first_obj.html(prepareSelectHtml(jsonResult.data));    

                secondStart();

                // 若有传入一级与二级的值，则选中。（setTimeout为兼容IE6而设置）

                setTimeout(function(){

                    if(settings.firstValue && settings.firstValue.length>0){

                        first_obj.val(settings.firstValue);

                        secondStart();

                        setTimeout(function(){

                            if(settings.secondValue && settings.secondValue.length>0){

                                second_obj.val(settings.secondValue);

                                thirdStart();

                                setTimeout(function(){

                                    if(settings.thirdValue && settings.thirdValue.length>0){

                                        third_obj.val(settings.thirdValue);

                                    };

                                },1);

                            };

                        },1);

                    };

                },1);

            });



            // 选择一级时发生事件

            first_obj.bind("change",function(){

                secondStart();

            });



            // 选择二级时发生事件

            second_obj.bind("change",function(){

                thirdStart();

            });

        };



        // 初始化第一个下拉框

        init();

    };

})(jQuery);

 

${rc.contextPath}/repair/loadCategory 对应的后台方法及返回json值：

@RequestMapping("loadCategory")

    @ResponseBody

    public Map<String, Object> loadCategory(ModelMap model){

           String msg = "";

            boolean isSuccess = false;

            List<Map<String, String>> maps=new ArrayList<Map<String,String>>();

            try {

                List<Category> categories= categoryService.findAllCategory();

                for (Category category : categories) {

                    Map<String,String> map=new HashMap<String, String>();

                    map.put("value", category.getId().toString());

                    map.put("text", category.getCategoryName());

                    maps.add(map);

                }

                msg = "查找大类成功。";

                isSuccess=true;

            } catch (Exception e) {

                msg = "查找大类失败。";

                log.error("查找大类失败：" + e.getMessage(), e);

            } 

           

        return buildAjaxResult(isSuccess, msg,maps);

    }



protected Map<String, Object> buildAjaxResult(boolean isSuccess, String msg, Object data) {

        Map<String, Object> resultMap = new HashMap<String, Object>();

        resultMap.put("success", isSuccess);

        resultMap.put("msg", msg);

        resultMap.put("data", data);

        return resultMap;

    }

 

 效果如图：