Rails/Javascript：数据属性不是通过partial返回的，而是存在于DOM中

我试图在字段下方显示运输成本的选择字段的值。感谢@Vasfed，我将使用数据属性和javascript。但是，尽管数据属性在加载第页时在DOM中呈现，但在检查控制台或资源时，它不会在为AJAX调用返回的数据中返回

在DOM中：

<select id="shippingservices_select" name="cart[shippingservice_id]"><option value="">select a carrier</option>
  <option value="7" data-price="3.9">UPS</option>
  <option value="19" data-price="10.0">DHL</option>
</select>

对于表单，它应同时返回值和数据属性：

<%= form_for :cart, :url => {:action => "show_shipping"}, :html => { :method => "get", :remote => true } do |f| %>
  <%= f.collection_select(:land_id, Land.all, :id, :name, {:prompt => "select a country"}, {:id => 'lands_select'}) %><br>
  <%= f.select(:shippingservice_id, options_for_select(@shippingservices.collect { |s| [s.name.titleize, s.id, {'data-price' => s.price}] }), {:prompt => "select a carrier"}, {:id => 'shippingservices_select'}) %><br>
<% end %>
Shipping: €<div id="shipping_cost"></div><br>

在我的partial _shippingservice.html.erb之后，我应该获得value和data属性，但我没有。我认为这就是原因：

$(document).on("change", "#shippingservices_select", function(event){
  var price = $(event.target).data('price');
  $("#shipping_cost").html(price);
});

不返回数据价格的值

我怎样才能让它工作？先谢谢你

更新

我试图排除故障，但事情似乎很奇怪

两个选择器都在DOM中显示数据。在加载页面上加载的shipping service select字段显示所有内容。在更改land selector时，加载的部分以及我可以在控制台中检查的部分只显示选项value+name，但在更改_shippingservice部分时，我发现通过AJAX加载的代码似乎不是由JS AJAX调用中引用的部分生成的，因为我可以更改内部代码，而不会对交付的负载产生任何影响

但在替换时

<%= escape_javascript(render(:partial => @shippingservices))%>

@shippingservices））%>

借

---

没有显示和加载任何内容。

您可以检查在运行rails的终端上渲染的部分。看起来您有多个可能的部分配送服务

您还可以指定要使用的分部，而不是让rails猜测：

render partial: 'carts/shippingservice', collection: @shippingservices, as: :shippingservice

---

非常感谢你。我在想，调用可能是问题所在，变量太松散了。我不知道你建议的选项。是否有任何文件可以让我了解这一点？再次感谢。

<option value="<%= shippingservice.id %>" data-price="<%= shippingservice.price %>"><%= shippingservice.name.titleize %></option>

def update_shipping
  ...
  respond_to do |format|
    format.js
  end
end

$(document).on("change", "#shippingservices_select", function(event){
  var price = $(event.target).data('price');
  $("#shipping_cost").html(price);
});

<%= escape_javascript(render(:partial => @shippingservices))%>

<%= escape_javascript(render ‘carts/shippingservice’)%>

render partial: 'carts/shippingservice', collection: @shippingservices, as: :shippingservice