Ruby on Rails - 基于f.select值更新字段

时间:2016-08-03 15:41:07

标签: ruby ruby-on-rails-4

我有一个下拉框来选择想要购买的门票数量。我希望更新后面的字段,以便在单击后反映该值。以下是我的表单片段:

    <%= form_for :transaction, :url => new_transaction_path(:event_id => @event.id), :method => 'GET' do |f| %>
      <table style="width:100%">
        <tr style="border-bottom: 1px solid #999999">
          <td><h4>Number of Guests</h4></td>
          <td>
            <%= f.select(:quantity, (1..20))%>
          </td>
        </tr>
        <tr style="border-bottom: 1px solid #999999">
          <!-- replace (1) with the value from the f.select dropdown -->
          <td><h4><%= @original_event_price %> x (1) guest(s)</h4></td>
        </tr>
      </table>
      <%= f.submit 'Request to Book', class: 'button mt1 btn-request-to-book' %>
    <% end %>

我想将(1)替换为最后一个表行中f.select下拉列表中的值到用户选择的guest虚拟机的值。

使用工作解决方案进行编辑

<%= form_for :transaction, :url => new_transaction_path(:event_id => @event.id), :method => 'GET' do |f| %>
  <table style="width:100%">
    <tr style="border-bottom: 1px solid #999999">
      <td><h4>Number of Guests</h4></td>
      <td>
        <%= f.select :quantity, (1..20), {}, { :onChange=>'mytest()', :id=>'quantitySelect' } %>
      </td>
    </tr>
    <tr style="border-bottom: 1px solid #999999">
      <!-- replace (1) with the value from the f.select dropdown -->
      <td><h4><%= @original_event_price %> x (1) guest(s)</h4></td>
    </tr>
  </table>
  <%= f.submit 'Request to Book', class: 'button mt1 btn-request-to-book' %>
<% end %>

SCRIPT

<script type="text/javascript">
  function mytest() {
    var quantity = $('#quantitySelect').val();
    $('#quantityRow').html("<h4><%= @original_event_price %> x (" + quantity + ") guest(s)");
  }
</script>

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery执行此操作:

让我们在数量字段上添加一个id:“quantitySelect” 我们还在td字段上添加一个id:“quantityRow”

$(function(){
  $('.quantitySelect').change(function(e){
    e.preventDefault();
    var quantity = $('.quantitySelect').val();
    $('.quantityRow').html("<h4><%= @original_event_price %> x (" + quantity + ") guest(s)");
  });
});

您还可以添加支票以查看数量是否为&gt; 1并将客人一词附加给客人。