select 만들기

html

• 옷 종류를 선택하는 select, 사이즈를 선택하는 select 총 2개 있음

//html
<form class="container my-5">
  <div class="form-group">
    <p>상품선택</p>
    <select class="form-control" id="option1">
      <option>모자</option>
      <option class="shirts">셔츠</option>
      <option>하의</option>
    </select>

    <div class="shirts-size size-select">
      <p class="mt-4">사이즈선택</p>
      <select class="form-control" id="option2">
        <option>100</option>
        <option>105</option>
        <option>110</option>
      </select>
    </div>
  </div>
</form>

css

• class를 만들고, 사이즈 셀렉트를 안보이게함

.size-select {
  display: none;
}

이벤트

• 이벤트는 select tag에 설정해야 한다.
  • select가 값들인 option을 포함한다.
• 셔츠를 선택하면, 셔츠 사이즈가 보이도록 한다.
  • $("#option1").val() === "셔츠"

$("#option1").on("change", function (e) {
  if ($("#option1").val() === "셔츠") {
    $(".shirts-size").removeClass("size-select");
  } else {
    $(".shirts-size").addClass("size-select");
  }
  // $(".shirts-size").removeClass("size-select");
});