前台页面 复制代码 代码如下: <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; } 效果如图：

　　推荐阅读

　　JavaScript实现自己的DOM选择器原理及代码

解释器模式（Interpreter）：定义一种语法格式，通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。 开放封闭原则：面向对象中的开放封闭原则是类或模块>>>详细阅读

本文标题：jquery怎样实现ajax联动框(一)

地址：http://www.17bianji.com/kaifa2/JS/22272.html

 1/2    1