带有dyanmic 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' },
];

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