[vanilla JS] select 박스 선택(option) 값 가져오기

회원가입 등에서 흔하게 볼 수 있는 기능 

위 이미지의 기능은 어느홈페이지에서나 가장 쉽게 접할 수 있습니다.

 

위와 같이 셀렉트 박스에서 선택한 값(value)을 텍스트 input으로 가져올 수 있는 방법을 제이쿼리 방식이 아닌 순수 자바스크립트로 알아보겠습니다.

 

 

-셀렉트박스의 '직접 입력'을 선택할 경우 "email_address"라는 id값을 가진 input을 활성화

 

-셀렉트박스의 '다른 이메일주소' 를 선택할 경우

선택한 이메일 주소값을 "email_address" id값을 가진 input 창에 자동으로 기입,

자동으로 비활성화 시키는 구성

<input type="text" id="email_address" />
<select id="email_select">
    <option value="0">직접입력</option>
    <option value="naver.com">네이버</option>
    <option value="gmail.com">g메일</option>
    <option value="nate.com">네이트</option>
</select>

선택한 이메일값이 들어갈 input과 선택값이 들어가있는 select box를 만듭니다.

 

 

//변수를 선언하여 input,select box를 할당
let email_address = document.getElementById("email_address");
let email_selectBox = document.getElementById("email_select");

//JS를 통해 변화가 일어났는지 탐지해주는 onchange 함수 사용
//selectedIndex 속성은 select태그의 선택한 값의 위치,index값을 알려준다. 시작값은 index와 같이 0

email_selectBox.onchange = function() {
	let selectValue = this.options[this.selectedIndex].value;
    
    if(this.value == "0") {
    	email_address.value = " ";
        email_address.removeAttribute("readonly");
    } else {
    	email_address.value = selectValue;
        email_address.setAttribute("readonly", true);
    }
}

간단하게 풀이하자면 아래와 같습니다.

 

조건문을 통해서 select박스에서 선택한 옵션의 값(value)이 "0"이라면 이메일 주소 입력 input창의 값을 비우고 직접 작성이 가능하도록 활성화.

 

select박스에서 선택한 옵션의 값(value)이 "0"이 아닌 이메일주소값이 할당되어 있다면 해당 이메일주소값을 input 으로 가져오고 "readonly"속성에 true값을 줘서 해당 input을 비활성화

 

제이쿼리로 하면 더 짧고 간단한 코드가 될 수는 있으나 순수 자바스크립트로 해도 너무 길거나 해석이 어려운 코드는 아니기때문에 자바스크립트로 하는것이 더 효과적으로 볼 수 있을 것 같습니다.