JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<select id="formcategory" name="Category" style="display: block;">
    <option value="Select One">Select One</option>
    <option class="BloodSample" value="1">Blood Sample</option>
    <option class="Exercise" value="2">Exercise</option>
    <option class="InsulinInjection" value="3">Insulin Injection</option>
    <option class="Meal" value="4">Meal</option>
    <option class="Symptoms" value="5">Symptoms</option>
    <option class="UrineSample" value="6">Urine Sample</option>
</select>

<label id="lblsubcategory" for="formsubcategory" style="display: inline;">Subcategory</label>
<select id="formsubcategory" name="Subcategory" style="display: block;">
    <option selected="selected" value="Select One" style="display: none;">Select One</option>
    <option class="Symptoms" value="51">Lethargy</option>
    <option class="Symptoms" value="52">Vomiting</option>
    <option class="Symptoms" value="53">Diarrhea</option>
    <option class="Symptoms" value="54">Seizures</option>
    <option class="Symptoms" value="55">Missed Meal</option>
    <option class="Symptoms" value="56">Poor Appetite</option>
    <option class="Symptoms" value="57">Excessive Drinking</option>
    <option class="Symptoms" value="58">Excessive Urination</option>
    <option class="UrineSample" value="61" style="display: none;">Positive - Glucose</option>
    <option class="UrineSample" value="62" style="display: none;">Negative - Glucose</option>
    <option class="UrineSample" value="63" style="display: none;">Positive - Ketones</option>
    <option class="UrineSample" value="64" style="display: none;">Negative -Ketones</option>
</select>

JavaScript

$('#formcategory').on('change', function() {
    var selected = $('#formcategory :selected').attr("class");
    $('#formsubcategory').find('option').show().not("."+selected).hide();
});