[JS] Select 태그 다루기

Select 태그

<select> 는 <input> 이랑  동일 

선택지를 드랍다운 메뉴로 제공하는 <input>

HTML

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
    <select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
    </select>
</form>

CSS

/* 11) Select 인풋 다루기 */
.form-hide {
  display: none;
}

미리 숨겨두기

---

유저가 셔츠선택하면 form-hide 제거해서 숨겨뒀던 95, 100 보이게 하기.

if 문 사용 ( ~ 하면)

  if (유저가 선택한거 == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }

 

$('.form-select').eq(1) 이것 과 동일한 것

 <select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
    </select>

유저가 <select> 에서 뭐 선택했는지 아는 방법 

document.getElementById('인풋태그찾고').value

인풋태그에서 사용했을 때,

제이쿼리셀렉트 쓰려면
$(".form-select").eq(0).val()
태그 찾고 값 찾기

---

<script> 안에 대충 적은 코드는 페이지 로드시 1회 실행됨
-  <script> 안에 적었기 때문에 그냥 페이지 로드시 1회 실행되고 다시는 실행되지 않음
- <select> 조작할 때 마다( 유저가 건드릴때마다) 실행하게 해야함.

input 이벤트 사용

$(".form-select")
  .eq(0)
  .on("input", function () {
    var value = $(".form-select").eq(0).val();
    if (value == "셔츠") {
      $(".form-select").eq(1).removeClass("form-hide");
    }
  });

  $(".form-select").eq(0).on("input", function () {});

사용해준다.

<input>이나 <select> 조작할 때 input 이벤트가 발생