jQuery 使用 data-src 更改 div 的值答案

【问题标题】：jQuery use data-src to change value of a divjQuery 使用 data-src 更改 div 的值
【发布时间】：2014-01-26 13:41:38
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

标签： javascript jquery multiple-value

【解决方案1】：

可以使用:selected selector找到选中的option元素，然后获取data属性的值

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

演示：Fiddle

但最好使用 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();

演示：Fiddle

【讨论】：

【解决方案2】：

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

【讨论】：