javascript - Rails 选择表单 : displaying and using select form value before submit?

Question

我正在为下订单流程制作一个多步骤表单。在其中我有两个选择器用于运输国家和运输服务。选择国家/地区后，将显示给定地点和重量的所有运输服务。下订单后，所有内容都会写入模型。所有运输细节过程都是通过 Ryan Bates #217 Multistep Forms 之后的多步骤表格完成的

在选择发货国家/地区后，通过 javascript ajax 调用填充发货服务选择器。我遵循了这两个教程 Dynamic select boxes with Rails 4和 Dependent country city state .

$(document).on("change", "#lands_select", function(event){
  $.ajax({
    url: "/carts/update_shipping/" + event.target.value,
    type: "GET"
  })
});

update_shipping.js.erb

$("#shippingservices_select").empty()
  .append("<%= escape_javascript(render(:partial => @shippingservices)) %>");

_shippingservice.html.erb

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

除此之外，我想在表格下方显示与两个选择器中的选择相关的运费以及计算出的总运费。

购物车的小计成本在购物车模型中计算，订单在订单模型中计算。

我该怎么做？由于这两个值尚未写入订单数据库，但我必须显示运输服务表内的第二个选择器选择的结果价格，但由于订单已自动写入但我无法通过订单实例调用它多变的。我的猜测是我必须调整 ajax 调用，是吗？我该怎么做？

据我所知，我现在拥有的是通过订单 Controller 的 update_shipping 操作生成的 json 填充表单。

提前致谢!

Answer 1

您可以在数据属性中传递该列:

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

然后像JS一样显示

$(document).on("change", "#shippingservices_select", function(event){
  var cost = $(event.target).data('cost');
  $("#some_cost_div").html(cost);
  // maybe add to total etc.
});