jquery怎樣實(shí)現(xiàn)ajax聯(lián)動框(一)
更新時(shí)間:2013年03月08日 12:02:50 作者:
ajax聯(lián)動框想必大家早有所耳聞,接下來本文詳細(xì)介紹下使用jquery實(shí)現(xiàn)的原理及代碼,感興趣的你可以參考下,或許對你有所幫助
前臺頁面
<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}',//任務(wù)大類
secondValue:'$!{repair.subcategoryid}'//人物小類
});
});
</script>
<tr id="rwflSelect">
<td width="100" class="t_r prten field_c">任務(wù)分類:</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 三級聯(lián)動
日期:2013-2-26
settings 參數(shù)說明
-----
firstUrl:一級下拉數(shù)據(jù)獲取URL,josn返回
firstValue:默認(rèn)一級下拉value
secondUrl:二級下拉數(shù)據(jù)獲取URL,josn返回
secondValue:默認(rèn)二級下拉value
thirdUrl:三級下拉數(shù)據(jù)獲取URL,josn返回
thirdValue:默認(rèn)三級下拉value
nodata:無數(shù)據(jù)狀態(tài)
required:必選項(xiàng)
------------------------------ */
(function($){
$.fn.linkSelect=function(settings){
if($(this).size()<1){return;};
// 默認(rèn)值
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;
};
// 賦值二級下拉框函數(shù)
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();
});
};
// 賦值三級下拉框函數(shù)
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而設(shè)置)
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);
});
// 選擇一級時(shí)發(fā)生事件
first_obj.bind("change",function(){
secondStart();
});
// 選擇二級時(shí)發(fā)生事件
second_obj.bind("change",function(){
thirdStart();
});
};
// 初始化第一個(gè)下拉框
init();
};
})(jQuery);
${rc.contextPath}/repair/loadCategory 對應(yīng)的后臺方法及返回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;
}
效果如圖:
復(fù)制代碼 代碼如下:
<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}',//任務(wù)大類
secondValue:'$!{repair.subcategoryid}'//人物小類
});
});
</script>
<tr id="rwflSelect">
<td width="100" class="t_r prten field_c">任務(wù)分類:</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
復(fù)制代碼 代碼如下:
/*
Ajax 三級聯(lián)動
日期:2013-2-26
settings 參數(shù)說明
-----
firstUrl:一級下拉數(shù)據(jù)獲取URL,josn返回
firstValue:默認(rèn)一級下拉value
secondUrl:二級下拉數(shù)據(jù)獲取URL,josn返回
secondValue:默認(rèn)二級下拉value
thirdUrl:三級下拉數(shù)據(jù)獲取URL,josn返回
thirdValue:默認(rèn)三級下拉value
nodata:無數(shù)據(jù)狀態(tài)
required:必選項(xiàng)
------------------------------ */
(function($){
$.fn.linkSelect=function(settings){
if($(this).size()<1){return;};
// 默認(rèn)值
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;
};
// 賦值二級下拉框函數(shù)
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();
});
};
// 賦值三級下拉框函數(shù)
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而設(shè)置)
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);
});
// 選擇一級時(shí)發(fā)生事件
first_obj.bind("change",function(){
secondStart();
});
// 選擇二級時(shí)發(fā)生事件
second_obj.bind("change",function(){
thirdStart();
});
};
// 初始化第一個(gè)下拉框
init();
};
})(jQuery);
${rc.contextPath}/repair/loadCategory 對應(yīng)的后臺方法及返回json值:
復(fù)制代碼 代碼如下:
@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;
}
效果如圖:

您可能感興趣的文章:
- 幾種二級聯(lián)動案例(jQuery\Array\Ajax php)
- jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動實(shí)例分析
- jquery ajax實(shí)現(xiàn)下拉框三級無刷新聯(lián)動,且保存保持選中值狀態(tài)
- ajax.net +jquery 無刷新三級聯(lián)動的實(shí)例代碼
- jquery怎樣實(shí)現(xiàn)ajax聯(lián)動框(二)
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- JQuery的Ajax請求實(shí)現(xiàn)局部刷新的簡單實(shí)例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- Jquery中ajax方法data參數(shù)的用法小結(jié)
- 用jQuery中的ajax分頁實(shí)現(xiàn)代碼
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果簡單示例
相關(guān)文章
jquery學(xué)習(xí)筆記 用jquery實(shí)現(xiàn)無刷新登錄
為了防止以后好久不用生疏,在這里記下,供剛開始學(xué)習(xí)jquery的童鞋們借鑒,我也是剛開始學(xué)jquery,有什么寫的不對的地方,還請大家指出錯(cuò)誤,共同進(jìn)步。2011-08-08jQuery動態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解
這篇文章主要介紹了jQuery動態(tài)添加.active 實(shí)現(xiàn)導(dǎo)航效果代碼思路詳解,需要的朋友可以參考下2017-08-08asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼 ,比頁面刷新更好,用戶體驗(yàn)更好,需要的朋友可以參考下。2010-09-09jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
這篇文章主要介紹了jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法,實(shí)例分析了2種實(shí)現(xiàn)判定非空的技巧,涉及jQuery頁面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-12-12