jquery가 ajax linkage box를 구현하는 방법 (1)_jquery

前台页면

复aze代码 代码如下:

任务分类：

附
jquery.select.js

复代码 代码如下:

/*
Ajax 3단계 연결
날짜: 2013-2-26
설정 매개변수 설명
------
firstUrl: 첫 번째 수준 drop- 다운 데이터 획득 URL, josn은
firstValue: 기본 1단계 드롭다운 값
secondUrl: 두 번째 수준 드롭다운 데이터 획득 URL, josn은
secondValue: 기본 2단계 드롭다운 값을 반환합니다.
thirdUrl: 세 번째 수준 드롭다운 데이터 획득 URL, josn Return
thirdValue: 기본 3단계 드롭다운 값
nodata: 데이터 상태 없음
required: 필수 옵션
-- ------ --------- */
(함수($){
$.fn.linkSelect=함수( settings){
if($(this).size()//기본값
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) ? "" : "선택하세요";
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function( index,row){
temp_html ="" row.text "";
});
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==" 없음"){
third_obj.css("display","none");
}else if(settings.nodata=="hidden"){
third_obj.css("visibility","hidden ");
};
return;
}
// 트래버스 할당 3레벨 드롭다운 목록
third_obj.html(prepareSelectHtml(jsonResult.data)).attr("disabled" ,false).css({"display":"","visibility":""});
thirdStart()
})
var init=function() {
// 할당 1레벨 드롭다운 목록 순회
$.getJSON(settings.firstUrl, {time: new Date().getTime() }, function(jsonResult){
if( !jsonResult.success){
return;
}
// 할당된 1단계 드롭다운 목록
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)
}// 레벨 1을 선택하면 이벤트가 발생합니다. first_obj.bind("change",function(){
secondStart();
})
// 두 번째 수준을 선택하면 이벤트가 발생합니다.
second_obj.bind("change", function(){
thirdStart();
});
//첫 번째 드롭다운 상자 초기화

} )(jQuery);


${rc.contextPath}/repair/loadCategory 해당 백그라운드 메서드 및 json 값 반환:




코드 복사

코드는 다음과 같습니다.

@RequestMapping("loadCategory")
@ResponseBody
공개 맵 loadCategory(ModelMap 모델){
String msg = "";
부울 isSuccess = false;
목록> map=new ArrayList

效果如图：