如何給一個下拉選項進行分組？

王铁柱6發表於2024-11-28

前端下拉選項分組可以使用幾種方法，取決於你使用的框架和想要達到的效果。以下是一些常見的方法：

1. 使用 <optgroup> 標籤 (原生 HTML)

這是最簡單和語義化最好的方法。<optgroup> 標籤允許你將相關的選項組合在一起，並在它們前面顯示一個組標籤。

<select>
  <optgroup label="水果">
    <option value="apple">蘋果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡蘿蔔</option>
    <option value="broccoli">西蘭花</option>
    <option value="spinach">菠菜</option>
  </optgroup>
</select>

2. 使用 JavaScript 和 CSS 自定義樣式

如果你需要更復雜的樣式或互動，可以使用 JavaScript 和 CSS 來建立分組效果。這通常涉及到：

  • 使用 JavaScript 動態建立和新增選項元素。
  • 使用 CSS 新增分隔線、不同的背景顏色或其他視覺線索來區分組。

例如：

<select id="mySelect">
</select>

<script>
  const fruits = [
    { value: "apple", label: "蘋果" },
    { value: "banana", label: "香蕉" },
    { value: "orange", label: "橙子" },
  ];
  const vegetables = [
    { value: "carrot", label: "胡蘿蔔" },
    { value: "broccoli", label: "西蘭花" },
    { value: "spinach", label: "菠菜" },
  ];

  const select = document.getElementById("mySelect");

  function addGroup(label, options) {
    const optgroup = document.createElement("optgroup");
    optgroup.label = label;
    options.forEach(option => {
      const optionElement = document.createElement("option");
      optionElement.value = option.value;
      optionElement.text = option.label;
      optgroup.appendChild(optionElement);
    });
    select.appendChild(optgroup);
  }


  addGroup("水果", fruits);
  addGroup("蔬菜", vegetables);

</script>

<style>
  #mySelect optgroup {
    font-style: italic; /* Example styling */
  }
</style>

3. 使用前端框架的元件

大多數現代前端框架（如 React, Vue, Angular 等）都提供帶有內建分組功能的下拉元件。這些元件通常提供更高階的功能，例如搜尋、過濾和自定義樣式。

  • React: 可以使用一些庫，例如 react-select, downshift 或自己構建元件。
  • Vue: 可以使用 v-select 或類似的元件庫。
  • Angular: 可以使用 MatSelect 和 MatOptgroup (Angular Material) 或自定義元件。

選擇哪種方法取決於你的具體需求和專案環境。 如果你只需要簡單的分組，<optgroup> 標籤就足夠了。 如果你需要更復雜的樣式或功能，則需要使用 JavaScript 和 CSS 或前端框架的元件。

相關文章