// html 부분
<form class="container my-5 form-group">
<p>상품선택</p>
<select id="select-box" class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
// Js 부분
let selectBox = document.querySelectorAll('.form-select');
selectBox[0].addEventListener('input', (e) => {
if (selectBox[0].value == '셔츠') {
selectBox[1].classList.remove('form-hide');
} else if (selectBox[0].value == '바지') {
selectBox[1].classList.remove('form-hide');
selectBox[1].innerHTML = ' ';
let template = `<option>28</option><option>30</option>`;
selectBox[1].append(template);
} else {
selectBox[1].classList.add('form-hide');
}
})
안녕하세요. select에서 바지를 선택할 경우 옵션 28, 30이 나와야하는데 빈칸만 나옵니다.
제이쿼리를 쓰지 않았지만 선생님 코드와 다른 부분이 없어보이는데 왜 제대로 안나오는지 알고싶습니다!
// 선생님 코드
<script>
$('.form-select').eq(0).on('input', function(){
var value = $('.form-select').eq(0).val();
if (value == '셔츠') {
$('.form-select').eq(1).removeClass('form-hide');
}
else if (value == '바지'){
$('.form-select').eq(1).removeClass('form-hide');
$('.form-select').eq(1).html('');
var 템플릿 = `<option>28</option><option>30</option>`;
$('.form-select').eq(1).append(템플릿)
}
});
</script>
