0

我正在使用<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>

谢谢你的帮助。

4

2 回答 2

2

您可以使用:selected 选择器找到选定的选项元素，然后获取数据属性的值

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

演示：小提琴

但最好使用 data-* 属性

<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();

演示：小提琴

于 2014-01-26T13:43:09.403 回答
1 
<script type="text/javascript">
jQuery('#choose').change(function(event) {
 jQuery('#price').html(jQuery('#choose option:selected').attr('data'));
});
</script>
于 2014-01-26T13:43:30.177 回答