Add optgrop in existing dropdown

Question

How can I set opt group to below dropdown based on type:

my select box

I want to rearrange based on type , so all dropdown, checkbox, slider, quantity box will be display in group . Also I want <optgroup> after each data-type

like <optgroup >Dropdown</optgroup ><optgroup >slider </optgroup >

I have tried via group by function but not getting correct result.

Answer 1

Here is a version using forEach

const sel = document.querySelector('.first-conditional-step');
const opts = [...sel.options].slice(1)
sel.options.length = 1; // keep the please select
const optGroups = new Set(opts.map(({dataset}) => dataset.type))
sel.innerHTML += [...optGroups].map(optGroup => `<optgroup label="${optGroup}">
  ${opts.filter(opt => opt.dataset.type===optGroup).map(opt=> opt.outerHTML)}
</optgroup>`).join("")

<select class="first-conditional-step col-3" style="height: 35px;">
  <option style="font-size: 10px" value="0">Select an element</option>
  <option value="410090" data-type="Dropdown Menu">Title</option>
  <option value="750978" data-type="checkbox">option#11</option>
  <option value="751330" data-type="checkbox">option#22</option>
  <option value="751331" data-type="checkbox">option#33</option>
  <option value="751269" data-type="checkbox">b1</option>
  <option value="751270" data-type="checkbox">b2</option>
  <option value="751271" data-type="checkbox">b3</option>
  <option value="751273" data-type="checkbox">Name</option>
  <option value="751274" data-type="checkbox">Name</option>
  <option value="751275" data-type="checkbox">Name</option>
  <option value="751293" data-type="checkbox">Image1</option>
  <option value="751294" data-type="checkbox">Image2</option>
  <option value="751295" data-type="checkbox">Image3</option>
  <option value="751271" data-type="quantity box">QTY tooltip</option>
  <option value="751273" data-type="slider">Slider Tooltip</option>
  <option value="751328" data-type="checkbox">Name</option>
  <option value="751329" data-type="checkbox">Name</option>
  <option value="751274" data-type="slider"></option>
  <option value="751275" data-type="quantity box"></option>
</select>