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

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

Answer 2

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

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

2 个答案: