반응형
개발컨셉은 아래와 같다.
개발 컨셉
셀렉트박스 2개 존재
- 광역지자체
- 기초지자체
페이지 로드 후에는 광역지자체 데이터만 있는 상태고 기초지자체 데이터는 없는 상태
광역지자체 선택 시 해당 코드에 해당되는 기초지자체 데이터가 기초지자체 selectbox에 세팅됨
광역지자체에서 다시 선택을 누르면 기초지자체는 다시 데이터 초기화됨
지자체 선택 후 검색 이벤트 발생 시 선택한 광역지자체, 기초지자체코드가 selected됨
script
$(document).ready(function () {
//광역지자체코드 세팅
cf_L_inst_option('serachInstL');
//검색한 광역 지자체코드(jsp라서 jstl 문법 사용)
var serachUpperInstL = '<c:out value="${searchVO.mngWideAreaLocgovCd}"/>';
if (serachUpperInstL) {
$("#serachInstL").find("option").each(function () {
if ($(this).val() === serachUpperInstL) {
$(this).prop("selected", true);
return false;
}
});
//광역에 해당되는 기초지자체코드 세팅
cf_B_inst_option('serachInstB', serachUpperInstL);
} else {
//기초지자체코드 빈값으로 세팅
cf_B_inst_option('serachInstB','');
}
//검색한 기초지자체코드
var serachLowerInstB = '<c:out value="${searchVO.mngBasisLocgovCd}"/>';
if (serachLowerInstB) {
$("#serachInstB").find("option").each(function () {
if ($(this).val() === serachLowerInstB) {
$(this).prop("selected", true);
return false;
}
});
}
});
//광역지자체코드에 해당되는 기초지자체코드 세팅
function fn_chg_area(v){
cf_B_inst_option('serachInstB', v);
}
//광역지자체코드
var cfIstCdArrL =[
//지역코드, 지역명, 상위지역코드...
['6110000','서울특별시','1100000000','0000000','1' ]
,['6260000','부산광역시','2600000000','0000000','1' ]
,['6270000','대구광역시','2700000000','0000000','1' ]
,['6280000','인천광역시','2800000000','0000000','1' ]
,['6290000','광주광역시','2900000000','0000000','1' ]
//나머지 생략..
]
//기초지자체코드
var cfIstCdArrB =[
['3060000','중랑구','1126000000','6110000','2' ]
,['3000000','종로구','1111000000','6110000','2' ]
,['3010000','중구','1114000000','6110000','2' ]
,['3020000','용산구','1117000000','6110000','2' ]
,['3030000','성동구','1120000000','6110000','2' ]
//나머지 생략..
];
//광역지자체코드 세팅
function cf_L_inst_option(target){
$('#' + target).html('<option value="">선택</option>');
for(var i = 0; i < cfIstCdArrL.length ; i++){
$('#' + target).append('<option value="'+cfIstCdArrL[i][0]+'">'+cfIstCdArrL[i][1]+'</option>');
}
}
//기초지차체코드 세팅
function cf_B_inst_option(target, code){
$('#' + target).html('<option value="">선택</option>');
for(var i = 0; i < cfIstCdArrB.length ; i++){
if(cfIstCdArrB[i][3] == code){
$('#' + target).append('<option value="'+cfIstCdArrB[i][0]+'">'+cfIstCdArrB[i][1]+'</option>');
}
}
}
html
<!-- 광역지자체 -->
<select name="mngWideAreaLocgovCd" onchange="fn_chg_area(this.value)">
</select>
<!-- 기초지자체 -->
<select name="mngBasisLocgovCd" id="serachInstB">
</select>
반응형
'IT > development' 카테고리의 다른 글
[mybatis] parameter 값 동시 전달 (24) | 2024.03.31 |
---|---|
[mybatis] mybatis data binding (feat. vo) (24) | 2024.03.17 |
[Chart.js] 통계 데이터 차트 생성 (feat. 안이쁨) (28) | 2024.03.01 |
[mybatis] 동적 쿼리 집계 쿼리 예시 (38) | 2024.02.25 |
[tiles] UnknownHostException: tiles.apache.org 에러 (48) | 2024.02.06 |