JSFiddle - React, Tailwind, and code Playground

HTML

<select id="DispDepartmentBox">
    <option value="">-Select- </option>
        
    		 <option value="7018879-3034">7018879-3034
	    </option>
    		
  
    		 <option value=" 7018879-11026"> 7018879-11026
	    </option>
    		
  
    		 <option value="7017300-XXXXX">7017300-XXXXX
	    </option>
    		
  
    		 <option value="1.02 and greater">1.02 and greater
	    </option>
    		
  
    		 <option value="7017300-61010">7017300-61010
	    </option>
    		
  
    		 <option value="7018879-03036">7018879-03036
	    </option>
    		
  
    		 <option value="7017300-56026">7017300-56026
	    </option>
    		
  
    		 <option value="7018879-03XXX">7018879-03XXX
	    </option>
    		
  
    		 <option value="7018879-03038">7018879-03038
	    </option>
    		
  
    		 <option value="7018879-03036 (MOD A)">7018879-03036 (MOD A)
	    </option>
    		
  
    		 <option value="7018879-03032">7018879-03032
	    </option>
    		
  
    		 <option value="7018879-03040">7018879-03040
	    </option>
    		
</select>
<br>
<br>
<input type="button" id="btnSort" value=" Sort Dropdown By Text ">
<input type="button" id="btnSortVal" value=" Sort Dropdown By Value ">

JavaScript

/* Sorting by Dropdown Option texts */
$('#btnSort').click(function (e) {

    $("#DispDepartmentBox").html($('#DispDepartmentBox option').sort(function (x, y) {

        return $(x).text() < $(y).text() ? -1 : 1;
    }));

    $("#DispDepartmentBox").get(0).selectedIndex = 0;

    e.preventDefault();
});

/* Sorting by Dropdown Option values */
$('#btnSortVal').click(function (e) {
    
    $("#DispDepartmentBox").html($('#DispDepartmentBox option').sort(function (x, y) {
        
        return $(x).val() > $(y).val() ? -1 : 1;
    }));
    
    $("#DispDepartmentBox").get(0).selectedIndex = 0;
    
    e.preventDefault();
});