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