JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<select id="my-select">
  <option value="wo optgroup">W/O Optgroup</option>
  <optgroup label="Section 1">
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
  </optgroup>
  <optgroup label="Section 2">
    <option value="dolor">Dolor</option>
    <option value="sit amet">Sit Amet</option>
  </optgroup>
</select>
<button id="open">
  Open Select List
</button>

JavaScript

$('#open').on('click', function() {
	// $('#my-select').show().focus().click();
  
  let element = document.getElementById("my-select");
  let worked = false;
	let e = new MouseEvent('mousedown');
  e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  worked = element.dispatchEvent(e);
  if (!worked) { // unknown browser / error
    alert("It didn't worked in your browser.");
	}
});