(응용)
- 바지 눌렀다가 다시 셔츠 누르면 뭔가 이상해지는 문제도 해결해보면 어떨까요.
셔츠눌렀을 때 둘 째 <select> 안에 있는 html도 조정해줘야겠군요.
[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 size_hide">
<option>95</option>
<option>100</option>
</select>
</form>
[js]
$('.form-select').eq(0).on('input', function (e){
var value = $('.form-select').eq(0).val();
if ( value == '셔츠'){
$('.form-select').eq(1).removeClass('size_hide');
$('.form-select').eq(1).append($('.form-select').eq(1)); << 여기 부분이 문제인것 같은데
}
else if (value == '바지'){
$('.form-select').eq(1).removeClass('size_hide');
var 바지사이즈 = `<option>28</option>
<option>30</option>`;
$('.form-select').eq(1).html(바지사이즈);
}
})
$('.form-select').eq(0).on('input', function (e){
var value = e.currentTarget.value;
if ( value == '모자'){
$('.form-select').eq(1).addClass('size_hide');
}
})
셔츠눌렀을 때 둘째 <select> 안에 있는 html도 조정하려고 하는데 잘 모르겠어서요...
혹시 어떤 부분을 수정해야할지 알려주시면 감사하겠습니다!
