如何创建具有相关字段的表单？ （RoR）

Question

我想知道如何创建一个表格来显示依赖于预先选择的字段的字段。例如：如果选择“咖啡”作为饮料，则仅允许输入糖和牛奶。

这是我的表格：

<%= simple_form_for(@order) do |f| %>
    <%= f.error_notification %>
    <div class="field">
    Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
    </div>
    Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %><br />

    Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />

    Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
    <% end %>
      <%= f.button :submit, class: "button is-info" %>

    <% end %>

Answer 1

首先，您需要包装要隐藏在div中的字段。为它们每个添加一个唯一的ID。

例如，如果要隐藏coffee_type，则可以向其添加ID“ js-coffee-type”。

还要添加一个类（例如，Bootstrap使用的d-none），以便我们可以使用CSS隐藏它。

    <%= simple_form_for(@order) do |f| %>
      <div class="field">
        Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
      </div>

      <div id="js-coffee-type" class="d-none">Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %></div>
      <div>Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>
      <div>Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>

      <%= f.button :submit, class: "button is-info" %>
    <% end %>

在同一文件中，您可以编写隐藏此字段的CSS代码。

    <style>
    .d-none { display: none; }
    </style>

现在，您可以编写JS代码以根据第一个字段切换类。

    <script>
    $("#extended_list").change(function() {
      var drink = $("#extended_list").val();

      if (drink == "Coffee") {
        $("#js-coffee-type").removeClass("d-none");
      } else {
        $("#js-coffee-type").addClass("d-none");
      }
    });
    </script>

这些不是最佳做法，但它们应该起作用。