[JavaScript] selectbox 동적 표시

상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다.

예를 들면 아래와 같은 상황이다.

광역지자체에 따라 그 하위 지자체 목록이 표시

1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다.

---

상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다.

<tr>
    <th>관리 광역지자체</th>
    <td class="left">
        <form:select path="mngWideAreaLocgovCd" id="mngWideAreaLocgovCd" onchange="fn_get_LocalGovInstCode();">
            <form:option value=""/>
            <form:options items="${metroCityInstList}" itemValue="insttCode" itemLabel="allInsttNm"/>
        </form:select>
    </td>
    <th>관리 기초지자체</th>
    <td class="left">
    	<!-- 동적으로 option 생성 -->
        <select id="lndMngBasisLocgovCd" name="mngBasisLocgovCd">
            <option value="">전체</option>
        </select>
    </td>
</tr>

function fn_get_LocalGovInstCode(){

	//광역지자체코드
	var selectedValue = $("#mngWideAreaLocgovCd").val();

	$.ajax({
		url: '/locgov/selectLocalGovInstList.do',
		method: 'POST',
		data: {insttCode: selectedValue},
		dataType:'json',
		success: function (data) {
			//데이터 중복 방지 위해 기존 기초지자체 데이터 삭제
			$("#lndMngBasisLocgovCd").empty();
			
			for (var i = 0; i < data.resultList.length; i++) {
				$("#lndMngBasisLocgovCd").append('<option value="' + data.resultList[i].insttCode + '">' + data.resultList[i].allInsttNm + '</option>');
			}
		},
		error: function (err) {
			console.error('Error fetching data: ', err);
		}
	});
}

서버 코드는 생략..(광역지자체코드를 상위코드로 가진 기초지자체 코드 조회 후 반환하는 로직)