jQuery는 div의 값을 변경하기 위해 data-src를 사용합니다

Question

나는 <select></select> 드롭 다운을 사용하고 div #price의 값을 변경하려고합니다. 그러나 값 선택기를 사용하여 데이터를 다른 양식으로 보내야합니다. 제 질문은 value=""에서 두 가지 옵션을 사용하거나 아래의 data=""과 같은 다른 선택기를 사용할 수 있습니까?

<select id="choose"> 
    <option value="test1" data="4.00">Test1</option> 
    <option value="test2" data="6.00">Test2</option> 
    <option value="test3" data="7.00">Test3</option> 
</select> 
<div id="price"></div> 

아래의 jQuery는 test1 test2 등만 반환합니다. 사용자 정의 데이터 값을 반환하려면 어떻게해야합니까?

<script type="text/javascript"> 
    jQuery('#choose').change(function(event) { 
    jQuery('#price').html(jQuery('#choose').val()); 
    }); 
</script> 

도움 주셔서 감사합니다.

Answer 1

당신은 :selected selector를 사용하여 선택한 옵션 요소를 찾은 다음 데이터의 값이 속성을 얻을 수

jQuery('#choose').change(function (event) { 
    jQuery('#price').html(jQuery('#choose option:selected').attr('data')); 
}).change(); //to iniitize the value on load 

데모 : Fiddle

---

그러나이 데이터 -를 사용하는 것이 더 좋을 것입니다 * 속성

<select id="choose"> 
    <option value="test1" data-value="4.00">Test1</option> 
    <option value="test2" data-value="6.00">Test2</option> 
    <option value="test3" data-value="7.00">Test3</option> 
</select> 
<div id="price"></div> 

다음에

jQuery('#choose').change(function (event) { 
    jQuery('#price').html(jQuery('#choose option:selected').data('value')); 
}).change(); 

데모 : 완벽 Fiddle

Answer 2

<script type="text/javascript"> 
jQuery('#choose').change(function(event) { 
jQuery('#price').html(jQuery('#choose option:selected').attr('data')); 
}); 
</script>