jQuery使用data-src来更改div的值

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>