[자바스크립트] form-select

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

이런 select 폼이 있다.

 

유저가 select에서 어떤 것을 선택했는지 어떻게 알 수 있을까?

 

$('.form-select').val();

.val()로 알 수 있다.

---

이제 input 이벤트리스너를 활용해서

상품이 "셔츠" 가 선택될 때, 사이즈 선택 select form이 나오도록 해 보자.

 

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

    <form  class="container my-1 form-group ">
        <select class="form-select mt-2 unshow">
            <option>100</option>
            <option>95</option>
        </select>
    </form>

우선 셀렉트 폼을 각각 만들어 준다.

사이즈 선택 셀렉트의 경우에는, 상품을 셔츠로 선택했을 때만 보여야 하므로

unshow라는 클래스를 붙여 평상시에는 display:none;이 되도록 하였다.

 

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

이제 이벤트 리스너를 달아준다.

값이 셔츠일 때 unshow를 remove,

값이 셔츠가 아니라면 다시 unshow를 붙여 보이지 않게 한다.