select만들기 with js로 html 만들기

devyoon99·2021년 11월 21일
0

UI

목록 보기
22/29
post-thumbnail

select만들기 with js로 html 만들기

  • 옷 종류 셀렉트와 사이즈 셀렉트 2개 있음
  • 이벤트
    • 옷 종류 셀렉트의 값이 바뀌는 것을 감지
      • 바지 선택 -> 바지 사이즈 나옴
      • 셔츠 선택 -> 셔츠 사이즈 나옴
//js
$("#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>

0개의 댓글