Widget:Agatha-test

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" name="state">

 <optgroup label="Item 1">
   <option value="01">The most common colors are brown, blue, green and black</option>
 </optgroup>
 <optgroup label="Item 2">
   <option value="02">158,987295 liters</option>
 </optgroup>
 <optgroup label="Item 3">
   <option value="03">It has a powerful poison</option>
 </optgroup>

</select>

<script> $(document).ready(function() {

   $('.js-example-basic-single').select2();

}); </script>