[JavaScript] <select> input 다루기

 

 

 

<select> 안에 옵션 넣으면 됨, 사용자가 입력하는 것이므로 <input>과 비슷

<select class="form-select mt-2">
        <option>모자</option>
        <option>셔츠</option>
</select>

 

Q. 그럼 왜 <input>안 쓰고 <select> 씀?

<input>은 사용자가 직접 입력하는 거라 자유로워서 이상한 거 입력할 수도 있는데

<select>은 사용자가 입력할 수 없고 고르는 것만 가능

 

 

 

✨ <select> 안에 <select> 넣기

$('.form-select').eq(0).on('input',function(){ //input : <input>값 변경될때 이벤트 작동
    if(this.value =='셔츠'){ //this == e.currentTarget, 현재 선택한 밸류가 셔츠면
        $('.form-select').eq(1).removeClass('form-hide');
    }else{$('.form-select').eq(1).addClass('form-hide');}
})

 

<script> 안에 대충 적은 코드는 페이지 로드 시 1회만 실행됨

유저가 선택할 때마다 코드가 실행되는 것으로 바꾸려면 이벤트리스너 써야 됨

(유저가 인풋(셀렉트)에 있는 값 변경할 때마다 인풋이벤트가 발생하므로)