select만들기 with js로 html 만들기
- 옷 종류 셀렉트와 사이즈 셀렉트 2개 있음
- 이벤트
- 옷 종류 셀렉트의 값이 바뀌는 것을 감지
- 바지 선택 -> 바지 사이즈 나옴
- 셔츠 선택 -> 셔츠 사이즈 나옴
$("#clothes-select").on("change", function () {
if ($("#clothes-select").val() === "셔츠") {
$("#size-select").html("");
$(".shirts-size").removeClass("size-select__hide");
const shirtsSize = `<option>95</option>
<option>100</option>
<option>105</option>
<option>110</option>`;
$("#size-select").append(shirtsSize);
} else if ($("#clothes-select").val() === "하의") {
$("#size-select").html("");
$(".shirts-size").removeClass("size-select__hide");
const pantsSize =
"<option>30</option>" +
"<option>31</option>" +
"<option>32</option>";
$("#size-select").append(pantsSize);
}
});
//html
<form class="container my-5">
<div class="form-group">
<select class="form-control" id="clothes-select">
<option class="shirts">셔츠</option>
<option>하의</option>
</select>
<div class="shirts-size size-select__hide">
<select class="form-control" id="size-select"></select>
</div>
</div>
</form>