<body>
<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 form-hide">
<option>95</option>
<option>100</option>
</select>
</form>
<script>
var value = $('.form-select').eq(0);
var size = $('.form-select').eq(1);
value.on('change', function() {
if (value.val() == '셔츠') {
size.removeClass('form-hide');
// html의 값을 다시 95, 100으로 되돌릴려면?
size.html(''); // html의 값을 비워놓음
size.append('<option>95</option>');
size.append('<option>100</option>');
} else if (value.val() == '바지') {
size.removeClass('form-hide');
size.html(option);
} else {
size.addClass('form-hide');
}
})
// 바지선택하면 28, 30 셀렉트 옵션 나오게 해주셈~
var option = `<option>28</option>
<option>30</option>`;
</script>
이런식으로 짜봤는데, size.html(option); 또는 size.append(option); 으로 html 요소를 변경하고 나서,
기존의 select 태그에 있는 option 요소를 이용하는 방법은 없을까요?
