Rails 嵌套的 collection_select 出现在 HTML 中，但不在屏幕上

Question

好的。奇怪的问题在这里。我正在 Rails 中构建一个嵌套表单，当我检查 html 并查看页面源代码时它看起来很好，但是 collection_select 选项没有出现下拉列表。同样，我可以在 html 中看到我的所有选项，但在实际窗口中，下拉菜单不存在。就好像我将 CSS 设置为 display: none;我没有。

这是嵌套的表单代码：

<%= form_for(@project) do |f| %>
  Countertops:

<%= f.fields_for :countertops, Countertop.new do |countertops_form| %>

<div class="form-group" align="left">
    <%= countertops_form.label :counterzip, "Tell us where your countertop project is going." %>
    <%= countertops_form.text_field :counterzip, class: "form-control", placeholder: "Enter your Zip Code" %>
</div>

<div id="countertype" class="form-group" align="left">
    <%= countertops_form.label :countertype_id, "What type of countertop material do you need?" %></br>
    <%= countertops_form.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }, class: "input-sm"  %>
</div>

<% end %>

<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>

这里是collection_select 生成的HTML。

<div id="countertype" class="form-group" align="left">
    <label for="project_countertops_attributes_0_countertype_id">What type of countertop material do you need?</label></br>
    <select class="input-sm" name="project[countertops_attributes][0][countertype_id]" id="project_countertops_attributes_0_countertype_id">
<option value="">Select Your Material</option>
<option value="1">Granite</option>
<option value="2">Marble</option>
<option value="3">Soapstone</option>
<option value="4">Wood</option>
<option value="5">Quartz</option>
<option value="6">Concrete</option></select>
  </div>

那么为什么我在页面加载时看不到这个？我可以看到标签，也可以看到第一个字段的表单。

我错过了什么？

Answer 1

恭喜它开始工作 - fields_for 可能很棘手，但我看到你在这里工作得很好。您的 HTML 看起来也正确。

---

如果您没有在屏幕上看到该元素，则有两种可能性：

CSS

你提到 CSS 应该没问题。

永远不要低估 CSS 的细微差别。我看到你有以下内容：

<div id="countertype" class="form-group" align="left">
    <%= countertops_form.label :countertype_id, "What type of countertop material do you need?" %></br>
    <%= countertops_form.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }, class: "input-sm"  %>
</div>

我会强烈建议在没有任何 CSS 的情况下尝试它：

<div>
   <%= countertops_form.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }  %>
</div>

-

fields_for

您遇到的另一个问题是fields_for - 您正在将Countertop.new 传递给该方法。虽然这应该没有问题，但在做这样的事情之前我遇到了问题。

如果你绝对想传递一个新的 fields_for 对象，你应该在你的控制器中构建它：

#app/controllers/projects_controller.rb
class ProjectsController < ApplicationController
   def new
      @project = Project.new
      @project.countertops.build
   end
end 

这将允许您使用以下 HTML：

<%= f.fields_for :countertops do |countertops_form| %>