当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery怎样实现ajax联动框(一)

jquery怎样实现ajax联动框(一)

2019年02月27日  | 移动技术网IT编程  | 我要评论

前台页面

. 代码如下:


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


效果如图：
\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网