[JavaScript] 다중 select 예시(feat. 지역코드)

개발컨셉은 아래와 같다.

개발 컨셉

셀렉트박스 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>