Rails 5 将下拉菜单与文本字段相结合答案

【问题标题】：Rails 5 combine dropdown with text fieldRails 5 将下拉菜单与文本字段相结合
【发布时间】：2018-05-21 12:06:06
【问题描述】：

我有一个名为 Color 的模型，其列具有 name。我有另一个名为 Car 的模型，它的列有 make、model 和 color_id。

在创建新的汽车时，我希望有一个下拉列表列出所有颜色，并在底部有一个“其他”选项。如果用户选择了“其他”选项，我如何使文本字段出现以便用户可以输入新颜色？

另外，如果用户选择了“其他”并输入了“黄色”，我该如何输入这个新的颜色数据？

【问题讨论】：

【解决方案1】：

一个很好的方法是使用datalists

<datalist id='colors'>
  <% Color.all.each do |color| %>
    <option><%= color.name %></option>
  <% end %>
</datalist>

<input class='form-control' list='colors' id='car_color_name' name='car[color_name]' value='<%=@car.color.name%>'>

这为您提供了一个下拉输入框，您可以在其中通过输入首字母来选择任何现有颜色，也可以在同一输入框中输入全新的颜色。

在您的 cars_controller 中的创建和更新方法中，您可以...

@car.color = Color.find_or_create_by(name: params[:car][:color_name])

不需要javascript！

【讨论】：

【解决方案2】：

您可以使用简单的 JQuery 来完成。

在你的Controller:

class CarsController < ApplicationController
  def new # it is up to you if you used another function
     @colors = Color.all.map{|c| [c.name, c.id]}
     @colors += [['Other', -1]] # as there is no negative ID
  end
end

在您的“视图”中：

# views/cars/new.html.erb
# the following line to the input 
select_tag :color, options_for_select(@colors) #check documentation of select tag for more usability (like default option...)

您现在要做的就是添加具有禁用属性的输入文本字段，为该输入文本字段提供id，例如id="otherColor"，使用JQuery 或JavaScript 禁用它，并在change 上创建一个新的actionListner对于选择（通过为 select_tag 提供名为 'id' 的附加参数，您将被允许这样做），然后检查他是否使用了其他选项，使他允许输入输入。

如果他选择了“其他”以外的其他选项，请不要担心，禁用的输入不会随请求一起发送，因此在您的控制器中，您必须检查他是否发送给您params['otherColor']，如果是这种情况，请创建新的颜色并将其附加到汽车上，否则将下拉列表中选定的颜色附加到汽车上，希望对您有所帮助。

【讨论】：