JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myformid">
<select id="myselect1" name="myselect1">
    <option value="" selected="selected">Any value</option>
    <option class="myoptionclass" value="0-5000">0-5000</option>
    <option class="myoptionclass"  value="5001-10000">5001-10000</option>
    <option class="myoptionclass"  value="10001-15000">10001-15000</option>
    <option class="myoptionclass"  value="15001-20000">15001-20000</option>
</select>


    
    
<select id="myselect2" name="myselect2">
     <option value="" selected="selected">Any value</option>
    <option class="myoptionclass" value="C">C</option>
    <option class="myoptionclass"  value="F">F</option>
    <option class="myoptionclass"  value="A">A</option>
    <option class="myoptionclass"  value="E">E</option>
</select>
</form>

JavaScript

var mylist = $('#myformid select');
      
    $(mylist).each(function (sorter, elm) { 
      var listitems = $(this).children('option.myoptionclass').get();
       listitems.sort(function(a, b) {
          var compA = parseInt($(a).text().split('-')[0]);
          var compB = parseInt($(b).text().split('-')[0]);
          return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
       })
         $.each(listitems, function(idx, itm) { 
               $(this).parent().append(itm); 
          });
     
    });