javascript - Ruby on Rails : Filling in form_for field depending on selection in other field

Question

我有一个交易模型，用于处理投资组合中股票的买卖。当确定我要购买/出售哪只股票时，我使用 options_for_collection_for_select 进行下拉。根据我选择的股票代码，我希望 buy_price 字段填写与该股票资源关联的last_price。 有没有办法存储 f.select :stock_id 中的选择并使用它来自动填充 buy_price 字段。使用 Rails 或 JavaScript。

<%= form_for([@portfolio, @transaction]) do |f| %>
  <% if @transaction.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@transaction.errors.count, "error") %> prohibited this transaction from being saved:</h2>

      <ul>
      <% @transaction.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :symbol %><br>
    <%= f.select :stock_id, options_from_collection_for_select(Stock.all, :id, :symbol), prompt: 'Please select a stock...' %>
  </div>
  <div class="field">
    <%= f.label :quantity %><br>
    <%= f.number_field :num_of_shares %>
  </div>
  <div class="field">
    <%= f.label :buy_price %><br>
    <%= f.number_field :buy_price %>
  </div>
  <div class="field">
    <%= f.label :buy_date %><br>
    <%= f.datetime_field :buy_date, :value => DateTime.now %>
  </div>

  <div class="actions">
    <%= f.submit class: 'btn btn-success' %>
  </div>
<% end %>

Answer 1

因此，首先您应该为需要修改的字段指定一些类名称:

<%= f.select :stock_id, options_from_collection_for_select(Stock.all, :id, :symbol), prompt: 'Please select a stock...', {class: 'stock'} %>

<%= f.number_field :buy_price, class: "buyprice" %>

然后，要编辑这些字段，您需要多次转义 javascript，所以我用来更改 ruby​​ 变量的是 CDATA。不过，我的缩进可能是错误的(我一直在使用 haml，并且我必须仅将制表符放在 ruby​​ 循环内)。您不能将 javascript 变量放入 escape javascript 中，因此您应该创建一个循环并检查该值，然后用它来更改要更改的字段的值。如果您希望用户不更改输入，您还可以将其设置为只读或隐藏。

<script>
  \//<![CDATA[
  $(document).ready(function(){
  $(".stock").change(function(){
  stockval = $(this).val();
  <%- Stock.pluck(:id).each do |stock| %>
    if($(this).val() == "#{stock}") {
    $(".buyprice").val("#{Stock.find(stock).last_price)}");
    }
  <%- end %>
  });
  });
  \//]]>
</script>

我不确定这是否完全正确，但我希望这会有所帮助:)。