2개 select 태그 연동, 선택시 옵션이 다르게 표시되는 방법

안녕하세요 엘빈입니다. 최근 풀스택으로 웹개발을 진행하고 있으면서 프론트엔드 부분도 열심히 공부하게 되는 것 같습니다. 처음에는 백엔드만 공부를 했는데 프론트 엔드의 태그들이나 문법들도 정말 좋은 것들이 많더군요. select 태그 또한 프론트엔드 개발을 시작하면서 알게 되었습니다. 사실 그동안 프론트 부분은 오픈 소스를 가지고 왔기 때문에 볼 일이 없었죠. 이번 포스팅에서는 한 select 태그를 선택하면 다른 select 태그의 옵션들이 보이도록 하는 방법에 대해서 정리해보겠습니다.

 select 알아보기

select는 기본적으로 아래 코드와 같이 작성합니다.

<div class="form-group col-sm-5">

                              <label for="addressKindU">도/특별시 선택</label>

                              <select class="form-control" id="addressKindU" name="addressKindU" onchange="addressKindChange(this)">

                                <option>주소를 선택하세요</option>

                                <option value="a">서울</option>

                                <option value="b">경기도</option>

                                <option value="c">충청남도</option>

                              </select>

                            </div>

                            <div class="form-group col-sm-4">

                              <label for="addressKindD">주소 소분류</label>

                              <select class="form-control" id="addressKindD" name="addressKindD">

                                <option>선택해주세요.</option>

                              </select>

                            </div>

먼저 저는 bootstrap을 css library로 즐겨 사용하기 때문에 form group div 안에 input 태그 요소들을 넣었습니다. 간단한 예시로 주소를 설정하는 select 태그들을 작성해보았습니다.

먼저 onchange 속성은 선택하는 option 종류가 달라지면 속성값의 함수를 실행하게 되는 구조입니다. option의 value 속성은 선택하는 것에 따라 구분지을수 있는 값입니다. 도/특별시의 경우 id 값을 addressKindU로 지정하였고 소분류는 addressKindD로 설정하였습니다.

우리는 도/특별시를 선택하면 그 하위에 있는 지역구를 선택할 수 있게 하겠습니다. 아래와 같이 스크립트 코드를 작성해줍시다.

 js 코드 작성

// 주소

function addressKindChange(e) {

    var seoul = ["강남", "홍대", "영등포", "여의도"];

    var gyeonggi = ["수원", "평택", "용인"];

    var chungcheongnam = ["천안", "세종", "논산"];

    var target = document.getElementById("addressKindD");

    if(e.value == "a") var d = seoul;

    else if(e.value == "b") var d = gyeonggi;

    else if(e.value == "c") var d = chungcheongnam;

    target.options.length = 0;

    for (x in d) {

        var opt = document.createElement("option");

        opt.value = d[x];

        opt.innerHTML = d[x];

        target.appendChild(opt);

    }   

}

js 코드는 onchange 속성값으로 넣어준 함수를 정의합니다. 배열 값으로 각 요소들을 넣어주며 해당 값이 선택될 경우 이에 따라 option value로서 삽입시켜 줍니다.

그러면 다음과 같은 사진처럼 도/특별시를 선택함에 따라 주소 소분류가 바뀌는 모습을 알 수 있습니다. 

포스팅 읽어주셔서 감사합니다!