Ajax 형태로 셀렉트박스를 불러올 때
신규 등록/수정
<select title="대분류 선택" name="codeId" id="k_category" style="width: 150px">
<option value="">선택</option>
</select>
<select title="중분류 선택" name="detailCodeId" style="width: 150px">
<option value="">선택</option>
</select>
<select title="소분류 선택" name="detailKPCCodeId" style="width: 150px">
<option value="">선택</option>
</select>
$(function() {
kppBCode("big",null,"codeId");
$(document).on("change","select[name='codeId']",function(){
setKppBoxList($(this).val(),"mid","detailCodeId",null);
$("select[name='detailKPCCodeId']").html( "<option value=''>선택</option>");
});
$(document).on("change","select[name='detailCodeId']",function(){
setKppBoxList($(this).val(),"small","detailKPCCodeId",null);
});
});
function kppBCode(depth,kppCode,name){
var skBcode = "<c:out value="${resultList[0].kppBCode}"/>";
var skMcode = "<c:out value="${resultList[0].kppMCode}"/>";
var skScode = "<c:out value="${resultList[0].kppSCode}"/>";
$.getJSON( "/portal/data/ajaxClas.do?depth="+depth+"&codeId="+kppCode, function( data ) {
$("select[name='"+name+"'] option").remove();
var items = [];
items.push( "<option value=''>선택</option>" );
$.each( data, function( key, val ) {
items.push( "<option value='"+val.codeId+"'>" + val.codeIdNm + "</option>" );
});
$("select[name='"+name+"']").html(items); //대분류 리스트 생성
if(skBcode!=''){
$("select[name='"+name+"']").val(skBcode).attr("selected","selected"); // 해당값 존재시 셀렉트
setKppBoxList(skBcode,"mid","detailCodeId",skMcode); //skBcode 자식들 리스트 셋팅 skMcode 존재시 세렉트
if(skMcode!=''){
setKppBoxList(skMcode,"small","detailKPCCodeId",skScode); // skMcode 자식들 리스트 셋팅 skScode 존재시 세렉트
}
}
});
}
json에서 return 하는 data 형태
function setKppBoxList(kppBCode,depth,searchKppMCode,kppThisCode){ // kppBCode = 값 , 뎁스 , select Name, 셀렉트값
// kppBcode 의 하위 코드 리스트를 불러와서 searchKppMCode(하위코드name)의 kppThisCode(하위코드val) 값을 selected
$.getJSON( "/portal/data/ajaxClas.do?depth="+depth+"&codeId="+kppBCode, function( data ) {
$("select[name='"+searchKppMCode+"'] option").remove();
var items = [];
items.push( "<option value=''>선택</option>" );
$.each( data, function( key, val ) {
if(depth=='mid'){
if(kppThisCode!=''&&kppThisCode==val.code){
items.push( "<option value='"+val.code+"' selected='selected'>" + val.codeNm + "</option>" );
}
else{
items.push( "<option value='"+val.code+"'>" + val.codeNm + "</option>" );
}
}
if(depth=='small'){
if(kppThisCode!=''&&kppThisCode==val.codeId){
items.push( "<option value='"+val.codeId+"' selected='selected'>" + val.codeNm + "</option>" );
}
else{
items.push( "<option value='"+val.codeId+"'>" + val.codeNm + "</option>" );
}
}
});
$("select[name='"+searchKppMCode+"']").append(items);
});
}