Ruby On Rails 和 bootstrap_form - f.text_field 中的下拉菜单答案

【问题标题】：Ruby On Rails & bootstrap_form - dropdown in f.text_fieldRuby On Rails 和 bootstrap_form - f.text_field 中的下拉菜单
【发布时间】：2021-07-27 14:02:40
【问题描述】：

我想在 Ruby on Rails 表单中的 text_field 处有下拉菜单。
我是这样写代码的：

<div class="dropdown">
  <%= f.text_field :title, class: "dropdown-toggle", data: {toggle:"dropdown"} %>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      # some dropdown items
  </ul>
</div>

我的代码不起作用，并且出现错误...

Uncaught TypeError: Cannot read property 'setAttribute' of null

在我的调查中，问题似乎......

<div class="dropdown"
  <div class="form-group">
    <input class="form-control dropdown-toggle" data-toggle="dropdown" type="text">
  </div>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    # some dropdown items
  </ul>
</div>

由于我使用的是引导表单，f.text_field 会自动被“form-group”包装。
为了使下拉菜单正常工作，我不需要这个包装器。

所以，下面的代码可以工作，但我不知道如何通过在引导形式中使用 f.text_field 来实现它。

<div class="dropdown"
  <input class="form-control dropdown-toggle" data-toggle="dropdown" type="text">
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    # some dropdown items
  </ul>
</div>

请告诉我如何共存“f.text_field”、“form-group”和引导下拉菜单。

【问题讨论】：

引导形式是什么意思，你是否使用了一些gem？
很抱歉让您感到困惑。我使用宝石“bootstrap_form”。（用法是bootstrap_form_with 代替form_with）
那么 gem 有一个帮助器 select (a dropdown) ，你为什么不使用它？
感谢您的评论。我想用 text_field 下拉（就像建议一样），所以我不使用f.select。

标签： ruby-on-rails bootstrap-4 dropdown

【解决方案1】：

我在官方文档 (https://github.com/bootstrap-ruby/bootstrap_form) 找到了解决方案

您可能希望围绕字段定义自己的表单组 div。为此，请将选项 wrapper: false 添加到输入字段。例如：

f.form_group :user do
  f.email_field :email, wrapper: false
end

【讨论】：