jQuery - select 박스, 옵션 값 이외에 다른 값도 사용하기

안녕하세요.

고코더 입니다.

셀렉트 박스를 사용하다보면 옵션 value 값 이외에도 다른 데이터가 필요할 경우가 있습니다. 그럴 경우에는 data 함수를 사용하면 원하는 데이터를 얻을 수 있습니다. 예를 한번 들어보겠습니다. 

 

● 1. 과일을 선택하는 셀렉트 박스를 만들었습니다. 그리고 value는 과일명 그리고 가격을 "data-price" 라는 속성에 값을 입력하였습니다. 

<select name="fruit" id="fruit"> 
	<option value="사과" data-price="1000">빨간 과일</option> </option> 
    <option value="바나나" data-price="2000">노란 과일</option> </option> 
</select>

 

● 2. 옵션 값 이외에 price 속성 값을 data() 함수를 사용해 가격을 가져왔습니다. 하나의 옵션 값에 두 가지 이상의 데이터를 가져오고 싶을때 사용 가능한 방법입니다.

$("#fruit").on("change", function () {
	var value = $(this).val();	//과일명
	var price = $(this).find("option:selected").data("price"); //가격
    alert(price);
});

 

● 3. 이렇게 value 값만이 아닌 다른 데이터들도 이용이 가능합니다.