JSFiddle - React, Tailwind, and code Playground

HTML

<p id="choosetype">
 <div>
     Food Catagory:
 </div>
 <select name="catagory" id="catagory" title="OPTIONAL - Choose a Catagory to Limit File Types" size="1">
     <option value="">All Food</option>
     <option value="Food1">Fruit</option>
     <option value="Food2">Veggies</option>
     <option value="Food3">Meat</option>
     <option value="Food4">Dairy</option>
     <option value="Food5">Bread</option>
 </select>
 <div>
  Food Selection
 </div>    
 <select name="fileType" id="fileType" size="1">
     <option value="Fruit1" class="sub-Food1">Apples</option>
     <option value="Fruit2" class="sub-Food1">Pears</option>
     <option value="Fruit3" class="sub-Food1">Bananas</option>
     <option value="Fruit4" class="sub-Food1">Oranges</option>
     <option value="Veg1" class="sub-Food2">Peas</option>
     <option value="Veg2" class="sub-Food2">Carrots</option>
     <option value="Veg3" class="sub-Food2">Broccoli</option>
     <option value="Veg4" class="sub-Food2">Lettuce</option>
     <option value="Meat1" class="sub-Food3">Steak</option>
     <option value="Meat2" class="sub-Food3">Chicken</option>
     <option value="Meat3" class="sub-Food3">Salmon</option>
     <option value="Meat4" class="sub-Food3">Shrimp</option>
     <option value="Meat5" class="sub-Food3">Tuna</option>
     <option value="Meat6" class="sub-Food3">Pork</option>
     <option value="Dairy1" class="sub-Food4">Milk</option>
     <option value="Dairy2" class="sub-Food4">Cheese</option>
     <option value="Dairy3" class="sub-Food4">Ice Cream</option>
     <option value="Dairy4" class="sub-Food4">Yogurt</option>
     <option value="Bread1" class="sub-Food5">White Bread</option>
     <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
  <span id="optionstore" style="display:none;"></span>
</p>

JavaScript

$(document).ready(function() {

    $('#catagory').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });

});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }
    //delete everything
    $('option[class^="sub-"]').remove();
    // put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#fileType').html(populateoption);
}

function rewriteoption(myfilter) {
    //rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";
    
    myfilterclass = (myfilter != "")?myfilterclass:"all";
    //first variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="sub-' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}