Rails 6（和可能的 Ajax？）如何在选择某个下拉选择时添加表单问题

Question

这就是我正在尝试做的事情。在我的“创建作业”中，我希望仅在 assignment_type 的下拉菜单中选择了“视频”时才显示“链接”问题。

<%= render 'shared/errors', obj: @assignment %>


<%= form_for(@assignment, :html => {class: "form-horizontal", role: "form"}) do  |f| %>
    <div class="form-group">
        <div class = "xtrapadding">
            <%=f.label "Select Unit(s) for Assignment"%>
            <%= f.collection_select(:unit_ids, Unit.all, :id, :name, {placeholder: "Units"}, {multiple: true} )%>

        </div>
          <div class="form-group">
            <%= f.label :assignment_type %>
            <%= f.select :assignment_type, options_for_select(Assignment.options, params[:type]), {}, required: true, class: 'form-control' %>
          </div>
        <div>
              <%= f.text_field :name, class:"form-control", placeholder: "Title of Assignment", autofocus: true %> 
        </div>
        <div class="field">
            <b><%= f.label :description %></b>
            <%= f.rich_text_area :description %>
        </div>
        <div>
            <%= f.text_field :duedate, class: "datepicker", placeholder: "Due Date"%>
        </div>
        <div>
              <%= f.text_field :link, class:"form-control", placeholder: "Insert video link", autofocus: true %> 
        </div>
        <div class="form-group" id="submitbutton">
            <div align = "center">
                <%= f.submit  class: "btn waves-effect waves-light" %>
            </div>
        </div>
    </div>
<%end%>

这是我想根据链接显示或隐藏的最后一个问题。我希望它默认为隐藏，但在使用特定值选择下拉列表时可见。我相当确定我需要使用 Ajax，但除此之外我不太确定从哪里开始。谢谢！顺便说一句，我正在使用 Webpacker 和 Rails 6。

Answer 1

当您想在页面上显示或隐藏某些内容时， 使用 Javascript。但是，只有当您想异步获取数据到服务器然后将该查询的结果放到您的网页中而不重新呈现整个页面时，Ajax 才会出现。

在您的示例中，一旦页面加载，您就已经在页面上拥有所需的一切，因此不需要 Ajax。有几种方法可以解决您的问题，但 td;dr 版本是“使用 Javascript”。

大概是这样的：

1. 在下拉菜单中放置一个事件监听器：当用户做出选择时，它会触发几个不同的 javascript 事件。您需要定义一个“侦听器”，当该事件触发时将调用一个函数（您将编写该函数）。在这种情况下，您可以使用类似 object.addEventListener("select", myScript) 的内容。这将在下拉列表中的每个项目上进行，然后myScript 函数将检查所选项目的值或 id。如果不是“视频”，则退出该功能。如果它是“视频”，请转到第 2 步...
2. 将隐藏元素的某些属性更改为可见。如果你用一个类隐藏它，你可以删除那个类。或者，您可以利用 HTML 的“可见”属性。现在您的项目是可见的。如果有人再次更改他们的选择，请转到第 3 步...
3. 和以前一样，触发了一个事件监听器，但现在我们隐藏了。如果您想在其中放置条件逻辑，它可能是隐藏元素的相同函数，或者您可以使用具有不同函数的不同列表器。然后，这将使用您为页面选择的任何可见性策略隐藏元素。

对于学习 Rails 的人来说，这是一个常见的困惑点。 Rails 做了很多工作，但 Javascript 仍然运行您的 DOM。了解两者之间的界限在哪里很重要。 I posted an answer to a similar question here, check it out if you want more context.

此外，您可能需要寻找一种方法来从表单提交中添加/删除隐藏字段的值。按照我的另一个答案的链接，那里有一个关于它的注释。