前台页面
复制代码 代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.select.js"><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;
}

效果如图:
jquery怎样实现ajax联动框(一)
标签:
jquery,ajax,联动框

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jquery怎样实现ajax联动框(一)”

暂无“jquery怎样实现ajax联动框(一)”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。