[jQuery] jQuery로 Select Box Option 태그 value값 여러개 주고 가져오기

개요

이번 글은 jQuery로 Select Box Option 태그에 value값을 여러개 주고 가져오는 방법에 대해 이야기해 보려고 한다.

예시

<select name="coupon" id="couponState" class="pl" onchange="selectCoupon()">
   <option value="0" selected>미선택</option>
   <c:forEach items="${couponLists}" var="couponList">
      <option value="${couponList.discountAmount}" value2="${couponList.couponIdn}">${couponList.couponName}</option>    
   </c:forEach>
</select>

예를들어 Select Box에서 옵션으로 쿠폰을 하나 선택하고 선택된 옵션의 value가 여러개(discountAmount, couponIdn) 필요한 상황일 때 option 태그 안에 value 속성을 여러개 주어 여러개의 value를 가질 수 있도록 할 수 있다.

가져오기

 var selectCoupon = function() {
        var couponName = $("#couponState option:selected").text();
        var discountValue = $("#couponState option:selected").val();
        var couponIdn = $("#couponState > option:selected").attr("value2");
    }

위와 같이 Option 태그를 구성했을 때 jQuery를 통해 각각의 값을 가져올 수 있는데

그냥 value로 설정한 값은 우리가 일반적으로 value를 가져오듯 val()을 통해, 추가로 설정한 value(value2, value3 등)은 attr("value 속성")을 통해 값을 가져올 수 있다.