Question

我有一个用于采购订单和采购订单行的嵌套表格。

purchase_order_line具有成分ID，数量，价格属性。

选择一种成分时，我试图实时更新价格。

purchase_order_line_fields

 <div class="purchase_order_lines">
  <div class="nested-fields">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-3">
          <%= select_tag "ingredients", "", class: "ingredients" %>
        </div>
        <div class="col-sm-3">
          <%= f.input :quantity, id: "quantity", input_html: {value: '1'}%>
        </div>
        <div class="col-sm-2">
          <%= f.input :price, class: 'price' %>
        </div>
        <div class="col-sm-2">
          <%= f.input :total_amount, class: "total_amount", readonly: true %>
        </div>
        <div class="col-sm-2">
          <%= link_to_remove_association "Remove", f, class: "btn btn-sm btn-danger" %>
        </div>
      </div>
    </div>
  </div>
</div>

application.js

$(document).ready(function() {
$('.ingredients').change(function(){
    var ingredient_id = $(this).val();
    var price = eval($(this).data('price'));
  $('.price').html(price)
})
})

事件侦听器正在工作，但是当我在下拉列表中选择新成分时，价格值将变为空白。我遇到的第二个问题是，如果我在下拉菜单中更改了一种成分，则所有purchase_order_lines的所有价格字段都会更新，而选择新成分时不仅会更新。我该如何解决？

Answer 1

对于价格为空的问题，您试图获取不存在的data-price属性的值。您想这样做：

var price = parseFloat(this.value);

对于所有.price同时更新的问题，您不必只针对当前.ingredients的兄弟姐妹：

$(this).siblings('.price').html(price);

.siblings方法使用提供的选择器搜索相邻元素（jquery对象的父级直接父级的子级）。

如果所有purchase_order_line_fields具有相同的父元素，则应该将所有purchase_order_line_fields包裹在div元素中。

顺便检查一下您的ID，以您定义它们的方式，您将有多个具有相同ID的元素，这是无效的html。

选择商品时，Rails更新价格字段

1 个答案: