Select tag

Select tag

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
        <option value="cap">모자</option>
        <option value="shirt">셔츠</option>
    </select>
    <select class="form-select mt-2 form-hide">
        <option>95</option>
        <option>100</option>
        <option>105</option>
        <option>110</option>
    </select>
</form>

• select 는 input 과 같이 사용자 인풋을 받는 태그지만, 드롭다운 형태로 미리 설정해놓은 옵션만 선택할 수 있다
• select > option tag 로 응답을 설정할 수 있다
• option은 value 값을 설정할 수 있는데, 따로 지정하지 않을 경우 html 값으로 대체된다

Responsive Select UI

.form-hide {
    display: none;
}

document.querySelectorAll('.form-select')[0].addEventListener('input', function() {
    if ( this.value == 'shirt' ) {
        document.querySelectorAll('.form-select')[1].classList.remove('form-hide');
    } else {
        document.querySelectorAll('.form-select')[1].classList.add('form-hide');
    }
})

• 위와 같이 select 에서 유저가 입력한 값은 event listener의 input event 발생 시 value로 받아올 수 있다 - (document.querySelectorAll('.form-select')[0].value)
• 여기서 선택한 event 개체는 .form-select 이므로 이를 중복 선택할 때 this or function(e) & eCurrentTarget 으로 대체할 수 있다