[javascript,jquery] select박스 여러개 동적으로 만들기 (가변적으로 생성)

실무에서 자주 쓰이는 jquery, javscript  부분인데, 알아두면 유용하다.

 

 

상기 이미지처럼 임의의 2개의 select 박스가 있고, 하나의 select 박스를 선택하면 다른하나가 그에 따라 동적으로 자동 바뀌게끔 된다.

 

<dl>
    <dt>위치 선택 [분류]</dt>
    <dd>
        <select id="r_loc1" name="loc1" onchange="r_loc1Chg()">
            <option value="">분류를 선택하세요.</option>
            <option value="핵심시설">핵심시설</option>
            <option value="주요시설">주요시설</option>
            <option value="기타시설">기타시설</option>
        </select>
    </dd>
</dl>
<dl>
    <dt>위치 선택 [장소]</dt>
    <dd>
        <select id="r_loc2" name="loc2">
            <option value="">장소를 선택하세요.</option>
            <option value="제1여객터미널">제1여객터미널</option>
            <option value="제2여객터미널">제2여객터미널</option>
            <option value="관제탑">관제탑</option>
            <option value="공항청사">공항청사</option>
            <option value="제2합동청사">제2합동청사</option>
            <option value="경비대본부">경비대본부</option>
            <option value="ICT센터영종소방소">ICT센터영종소방소</option>
        </select>
    </dd>
</dl>
 
<script>
function r_loc1Chg() {
 
    var loc2_a = ["제1여객터미널","제2여객터미널","화물터미널 A","화물터미널 B, C","AICC","관제탑","탑승동","제1계류장 관제탑","제2계류장 관제탑"];
    var loc2_b = ["ICT센터 (정보통신동)","관제수신소","관제송신소","VOR/DEM","신불 R/D","왕산 R/D","주배수지","주변전소 A, B","배전변전소","급유시설 장애","공항청사","제2합동청사","경비대본부"];
    var loc2_c = ["기타장소1","기타장소2","기타장소3","기타장소4","기타장소5"];
 
    $('#r_loc2').empty(); // 아래 option 삭제
    $('#r_loc2').append("<option value=''>장소를 선택하세요.</option>"); // 최상의 선택제목
 
    var str = $('#r_loc1').val();
    if (str=="핵심시설") {
        for (i=0;i<loc2_a.length;i++)
        {
            $('#r_loc2').append("<option value='"+ loc2_a[i] +"'>"+ loc2_a[i] +"</option>");
        }
    } else if (str=="주요시설") {
        for (i=0;i<loc2_b.length;i++)
        {
            $('#r_loc2').append("<option value='"+ loc2_b[i] +"'>"+ loc2_b[i] +"</option>");
        }
    } else if (str=="기타시설") {
        for (i=0;i<loc2_c.length;i++)
        {
            $('#r_loc2').append("<option value='"+ loc2_c[i] +"'>"+ loc2_c[i] +"</option>");
        }
    } 
}
</script>

loc2_a , loc2_b, loc3_c 각각 배열값으로 option 를 준비한다.

empty() 와 append() 이용해서 지우고 , 붙여서 option 을 만든다.