센세
센세가 가르쳐준 데이터 바인딩도 함께 응용해보고 싶다면 해보라고 한 것 해봤는데
코드리뷰 가능할까요?
HTML
<form class="container my-5 form-group">
<p>상품선택</p>
<select class="form-select mt-2">
<option>모자</option>
<option>셔츠</option>
<option>바지</option>
</select>
<select class="form-select mt-2 none">
<!-- 데이터바인딩 + html생성해보자 -->
</select>
</form>
--------------------------------
Javascript
<script>
var select = document.querySelectorAll(".form-select");
var 셔츠사이즈 = [{id : 0, size: 'S'},{id : 0, size: 'M'},{id : 0, size: 'L'}];
var 바지사이즈 = [{id : 1, size: '26'},{id : 1, size: '28'},{id : 1, size: '30'}];
select[0].addEventListener("input",(e)=> {
if(select[0].value !== '모자') {
select[1].classList.remove("none");
}
if(select[0].value == '셔츠') {
let 탬플릿 = `<option>${셔츠사이즈[0].size}</option>
<option>${셔츠사이즈[1].size}</option>
<option>${셔츠사이즈[2].size}</option>`
select[1].innerHTML = 탬플릿;
}
if(select[0].value == '바지') {
let 탬플릿 = `<option>${바지사이즈[0].size}</option>
<option>${바지사이즈[1].size}</option>
<option>${바지사이즈[2].size}</option>`
select[1].innerHTML = 탬플릿;
}
})
</script>
