JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<select multiple style="height: 500px; width: 300px">
  <optgroup label="Colours">
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
    <option value="W">White</option>
    <option value="P">Pink</option>
  </optgroup>
  <optgroup label="Numbers">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </optgroup>
</select>

JavaScript

$(document).on("mouseup", "optgroup", function(e) {
  var target = $(e.target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  }
});