JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<select name="business-law" id="business-law" class="filter-list">
  <option value="1343422000388433">Rufus-Isaacs, Acland &amp; Grantham LLP</option>
  <option value="1344387526915373">Cooley LLP</option>
  
  <option value="1343738709489824">Best Best &amp; Krieger LLP</option>
  
  <option value="1343422101785882">Fox, Shjeflo, Hartley &amp; Babu LLP</option>
  <option value="1343886813705043">Friedemann Goldberg LLP</option>
  <option value="1343241078135471">Gibson, Dunn &amp; Crutcher LLP</option>
  <option value="1343741151116255">Gordon &amp; Rees LLP</option>
  <option value="1343738429626539">Jones Day</option>
  <option value="1343738944939295">LeClairRyan</option>
  <option value="1343738077704822">Manning &amp; Kass, Ellrod, Ramirez, Trester LLP</option>
  <option value="1343159302660469">Milbank, Tweed, Hadley &amp; McCloy LLP</option>
  <option value="1343241815868878">Perkins Coie LLP</option>
  <option value="1343742091513693">Peter J. Dekom, a Law Corporation</option>
  
  <option value="view-all">&mdash; View All California Law Firms</option>
</select>

JavaScript

$(function(){
    //this JS function sorts the select box list in alphabetical order
    // Loop for each select element on the page.
    $("#business-law").each(function() {
    
        // Keep track of the selected option.
        var selectedValue = $(this).val();
    
        // Sort all the options by text.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
        }));
    
        // Select one option.
        $(this).val(selectedValue);
    });
});