使用 JavaScript 在 simple_form 中显示复选框

Question

我有一个 simple_form 表单，其中用户 select 通过复选框有多个选项。 但是，由于有很多选项，因此表单中充满了复选框。

我想知道是否有更简洁的方式来显示它。 例如，我正在考虑有一个“蔬菜”和“水果”按钮，然后当您单击它时，会出现一个弹出窗口，您可以在其中 select 复选框。 我想我可以用 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" ] %>

我在考虑使用下拉菜单，但你只能 select 一个。

任何帮助，将不胜感激。

Answer 1

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

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

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

<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>

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

Answer 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>