使用 JavaScript 在 simple_form 中显示复选框答案

【问题标题】：Using JavaScript to display checkboxes in simple_form使用 JavaScript 在 simple_form 中显示复选框
【发布时间】：2020-09-06 22:15:51
【问题描述】：

我有一个 simple_form 表单，用户可以通过复选框选择多个选项。但是，由于选项太多，因此表单中的复选框很杂乱。

我想知道是否有更简洁的方式来显示它。例如，我正在考虑有一个“蔬菜”和“水果”按钮，然后当您单击它时，会出现一个弹出窗口，您可以在其中选择复选框。我想我可以用 JavaScript 做到这一点，但我不确定如何实现代码。

这是我的一些代码示例（使用 Act as Taggable gem）。

<%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: [ "Apples", "Peaches", "Oranges" ] %>

<%= f.input :tag_list, label: "Vegetables", as: :check_boxes, collection: [ "Potatoes", "Corn", "Broccoli" ] %>

我在考虑使用下拉菜单，但您只能选择一个。

任何帮助将不胜感激。

【问题讨论】：

data-toggle: "id" 怎么样。

标签： javascript ruby-on-rails ruby forms

【解决方案1】：

你的问题不清楚。你希望 JavaScript 显示复选框，最后你想要一个带有多个选择的下拉列表。

无论如何，我认为您可以使用带有多个选择选项的下拉菜单

这是一个示例下拉列表，可用于一次选择多个项目

<select id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

查看以下链接以获取有关多选的更多信息以及如何在多选后处理表单https://www.w3schools.com/tags/att_select_multiple.asp

【讨论】：

使用该代码，它仍然只能让我选择一个，除非我按住 Ctrl。它也出现在垂直列表中。我将有很多水果和蔬菜的选择，所以有兴趣使用可以选择多个的下拉菜单。

【解决方案2】：

我认为您可以使用 javascript 来完成此操作。在表单中添加隐藏字段/模态/弹出代码，添加一个按钮/内联链接以打开该隐藏字段/模态/弹出窗口，该隐藏字段/模态/弹出窗口将显示所有选项。

例如：我正在添加一个隐藏字段，您可以添加一个模式/弹出窗口（只要确保它在 form 中）

<%= simple_form_for ... %>

  // This is shown
  <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: [ "Apples", "Peaches", "Oranges" ] %>

  <button class="showFruitsBtn">Show More Fruits</button>

  <div class="hiddenFruits">
    <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: [ "Banana", "Mango", "Rest of fruits" ] %>
  </div>

<% end %>

然后在JS中

const showFruitsBtn = document.getElementById('showFruitsBtn');
const hiddenFruits = document.getElementById('hiddenFruits');

hiddenFruits.style.display = "none";

showFruitsBtn.addEventListener('click', () => {
  // Toggle hide
});

如果您使用一些参考/模型/大型数组，例如 fruitsArr = ["Apples", "Peaches", "Oranges", "Banana", "Mango", "Rest of fruits"]，那么您可以执行以下操作：

  // show this initially
  <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: fruitsArr.all[0..3] %>

  <button class="showFruitsBtn">Show More Fruits</button>

  <div class="hiddenFruits">
    <%= f.input :tag_list, label: "Fruit", as: :check_boxes, collection: fruitsArr.all[3...] %> // Endless arrays
  </div>

【讨论】：