Ruby on Rails -根据www.example.com值更新字段f.select

ca1c2owp  于 2023-01-04  发布在  Ruby
关注(0)|答案(2)|浏览(122)

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

<%= 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最后一行中www.example.com下拉列表中的值,替换为用户选择的guests值。

用工作溶液编辑

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

m0rkklqb1#

您可以使用jQuery来实现这一点:
让我们添加一个ID:quantity字段上的“quantitySelect”让我们再添加一个id:td字段上的“数量行”

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

您还可以添加if检查以查看数量是否〉1,并将单词guest附加到guest。

aiazj4mn

aiazj4mn2#

    • 问题**:* 如何根据下拉选择加载其他字段的值 *
    • 溶液**:
<div class="field form-group">
  <%= form.label :grade %>
  <%= form.select(:grade, options_for_select(['A', 'B', 'C', 'D', 'E', 'F']), {:include_blank => 'Select Grade'}, class:"form-control", placeholder:"Grade", onchange: "loadRemarksBasedOnGrade()") %>
</div>

<div class="field form-group">
  <%= form.label :remarks %>
  <%= form.text_field :remarks, class:"form-control", placeholder:"Remarks", readonly: true %>
</div>
    • 脚本**:
<script type="text/javascript">
  function loadRemarksBasedOnGrade() {
    var grades = [];
    grades['A'] = "Excellent";
    grades['B'] = "Very Good";
    grades['C'] = "Good";
    grades['D'] = "Average";
    grades['E'] = "Below average";
    grades['F'] = "Failed";

    let grade = document.getElementById("student_grade");
    if(grades[grade.value] !== undefined) {
      document.getElementById("student_remarks").value = grades[grade.value];
    } else {
      document.getElementById("student_remarks").value = "";
    }
  }
</script>

注:因此,在事件加载时,RemarksBasedOnGrade根据ID更新值。

相关问题