Javascript Jquery,从匹配正确模式的所有div中读取数据属性

Javascript Jquery,从匹配正确模式的所有div中读取数据属性,javascript,jquery,html,coffeescript,Javascript,Jquery,Html,Coffeescript,我的html代码如下所示: <select id="invoice_line_items_attributes_0_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]"> <option value=""></option> <option value="34" data-price="123.0">

我的html代码如下所示:

<select id="invoice_line_items_attributes_0_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="34" data-price="123.0">asdsad</option>
<option value="35" data-price="123213.0">asd</option>
</select>

<select id="invoice_line_items_attributes_1_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="31" data-price="1223.0">asdsad</option>
<option value="32" data-price="12333213.0">asd</option>
</select>
但它给我的是未定义的数据,而不是价格值

三件事:

1) 您不需要逐个迭代select元素,然后绑定偶数。选择器将自己为匹配的元素执行此操作

2) 您需要找到所选的选项,然后获取数据价格值

3) 使用
.data()
而不是使用
.attr()
来获取数据属性值

使用:


这是因为您的
选择
没有
数据属性
,我想您需要选择的选项
数据属性

为了获取
数据属性
jquery提供了
数据
功能

你喜欢贝娄

$('[id*="product"]').change(function(){
   alert($(this).find(':selected').data('price'));
});

$('[id*="product"]').change(function(){
   alert($(this).find('option:selected').data('price'));
});
$('[id*="product"]').change(function(){
   alert($(this).find(':selected').data('price'));
});