Question

我的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>

现在我想迭代所有这些选择，当其中一个更改此值时会提醒此date-price属性。我尝试使用以下代码执行此操作：

  $('[id*="product"]').each ->
    $(this).change ->
      alert  $(this).attr("data-price")

但它给了我未定义而不是这个数据价格值。

Answer 1

三件事：

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

2）您需要找到所选的选项，然后获取数据价格值。

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

使用：

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

<强> Working Demo

Answer 2

这是因为您的select没有data-attr，我认为您需要所选的选项data-attr。

要获得data-attributes jquery提供.data函数。

喜欢吼叫。

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

DEMO

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

2 个答案: