带有dyanmic optgroup的下拉列表

Dynamic Optgroup 是一种用于前端开发中的 JavaScript 函数，它允许您在下拉列表中动态添加和删除选项。下拉列表通常用于提供一组预定义的选项，这些选项可以根据用户的需求进行筛选或排序。通过使用 Dynamic Optgroup，您可以动态添加或删除选项，从而允许用户在列表中添加或删除选项，以更好地满足他们的需求。

使用 Dynamic Optgroup 的步骤如下：

引入 Dynamic Optgroup 函数：

<script src="https://cdnjs.cloudflare.com/ajax/libs/dynamic-optgroup/1.1.0/dynamic-optgroup.min.js"></script>

创建一个包含预定义选项的数组：

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  { value: 'option4', label: 'Option 4' },
];

使用 Dynamic Optgroup 函数创建下拉列表：

<select id="select">
  <option value="">Select an option</option>
</select>

<script>
  const select = document.getElementById('select');
  const dynamicOptions = options.map((option) => {
    return {
      value: option.value,
      label: option.label,
      // 根据需要添加其他属性
    };
  });

  const optgroup = document.createElement('optgroup');
  optgroup.label = 'Options';
  select.appendChild(optgroup);

  optgroup.options = dynamicOptions;
</script>

在上面的代码中，我们首先创建了一个包含预定义选项的数组。然后，我们使用 map 函数遍历数组中的每个选项，并根据需要添加其他属性。接下来，我们使用 document.createElement 创建一个 optgroup（选项组），并将其添加到下拉列表中。最后，我们将动态选项添加到 optgroup 中。

Dynamic Optgroup 函数还允许您使用表达式来动态添加或删除选项。例如，如果您希望在用户选择某个选项时添加或删除选项，您可以使用 addEventListener 方法监听下拉列表的选择事件，并使用表达式动态添加或删除选项。