JSFiddle - React, Tailwind, and code Playground

by ASMITH

HTML

<ul>
    <li>
        <select name="C5R" size="1" id="C5R" class="fontSize">
            <option class="fontSize"></option>
            <option value="1" class="fontSize">Norfolk</option>
            <option value="2" class="fontSize">Suffolk</option>
            <option value="3" class="fontSize">Essex</option>
        </select>
    </li>
    <li>
        <select name="C5T" size="1" id="C5T" onchange="{C5TSelectChange(); onBlurUpdate(this)}" class="fontSize">
            <option class="fontSize"></option>
            <option value="1" class="fontSize">Dereham</option>
            <option value="2" class="fontSize">East Dereham</option>
            <option value="3" class="fontSize">Gorleston</option>
            <option value="4" class="fontSize">Great Yarmouth</option>
            <option value="5" class="fontSize">Harleston</option>
            <option value="6" class="fontSize">Kings Lynn</option>
            <option value="7" class="fontSize">Long Stratton</option>
            <option value="8" class="fontSize">Norwich</option>
            <option value="9" class="fontSize">Sheringham</option>
            <option value="10" class="fontSize">Spixworth</option>
            <option value="11" class="fontSize">Wymondham</option>
            <option value="12" class="fontSize">Aldeburgh</option>
            <option value="13" class="fontSize">Beccles</option>
            <option value="14" class="fontSize">Bramford</option>
            <option value="15" class="fontSize">Bury St. Edmunds</option>
            <option value="16" class="fontSize">Debenham</option>
            <option value="17" class="fontSize">Eye</option>
            <option value="18" class="fontSize">Felixstowe</option>
            <option value="19" class="fontSize">Framlingham</option>
            <option value="20" class="fontSize">Great Cornard</option>
            <option value="21" class="fontSize">Hadleigh</option>
            <option value="22" class="fontSize">Haughley</option>
        ...

JavaScript

$(document).ready(function () {
    $('select:gt(0)').find('option:gt(0)').hide().prop('disabled', true);

    $('#C5R').change(function () {
        $('select:gt(0)').find('option:gt(0)').hide();
        var thisVal = $(this).val();
        if (thisVal == 1) {
            $('#C5T').find('option').each(function () {
                var thisVal = $(this).val();
                $(this).hide().prop('disabled', true);;
                if ((thisVal >= 1) && (thisVal <= 11)) {
                    $(this).show().prop('disabled', false);;
                }
            });
        } else if (thisVal == 2) {
            $('#C5T').find('option').each(function () {
                var thisVal = $(this).val();
                $(this).hide().prop('disabled', true);;
                if ((thisVal >= 12) && (thisVal <= 32)) {
                    $(this).show().prop('disabled', false);;
                }
            });
        } else if (thisVal == 3) {
            $('#C5T').find('option').each(function () {
                var thisVal = $(this).val();
                $(this).hide().prop('disabled', true);;
                if ((thisVal >= 33) && (thisVal <= 51)) {
                    $(this).show().prop('disabled', false);;
                }
            });
        }
    });
});