JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p>T1:
        <select id="tier1" selected="">
            <option value="none" selected>None</option>
            <option value="AAA">(000) AAA</option>
            <option value="BBB">(111) BBB</option>
            <option value="CCC">(222) CCC</option>
            <option value="DDD">(333) DDD</option>
        </select>
    </p>
    <p>T2:
        <select id="tier2" disabled="true">
            <option value="none" selected>None</option>
            <option value="000A">(000A) 1A</option>
            <option value="000B">(000B) 2A</option>
            <option value="000C">(000C) 3A</option>
            <option value="111A">(111A) 1B</option>
            <option value="111B">(111B) 2B</option>
            <option value="111C">(111C) 3B</option>
            <option value="111D">(111D) 4B</option>
            <option value="111E">(111E) 5B</option>
            <option value="111F">(111F) 6B</option>
            <option value="111G">(111G) 7B</option>
            <option value="111H">(111H) 8B</option>
            <option value="111I">(111I) 9B</option>
            <option value="111J">(111J) 10B</option>
            <option value="111K">(111K) 11B</option>
            <option value="111L">(111L) 12B</option>
            <option value="222A">(222A) 1C</option>
            <option value="222B">(222B) 2C</option>
            <option value="222C">(222C) 3C</option>
            <option value="222D">(222D) 4C</option>
            <option value="222E">(222E) 5C</option>
            <option value="222F">(222F) 6C</option>
            <option value="222G">(222G) 7C</option>
            <option value="222H">(222H) 8C</option>
            <option value="222I">(222I) 9C</option>
            <option value="333A">(333A) 1D</option>
        </select>
    </p>
    <p>T3:
        <select id="tier3" disabled="true">
            <option value="none" selected>None</option>
            <option value="000A">(000A) 1A</option>
            <option value="000B">(000B)...

CSS

#tier1, #tier2, #tier3 {
    width: 300px;
}

JavaScript

$('#tier1').change(function () {
	    if ($(this).val() == 'none') {
	        $("#tier2").val('none');
	        $("#tier3").val('none');
	        prepareList('', $("#tier2"), 0);
	        prepareList('', $("#tier3"), 0);
	        $("#tier2").attr('disabled', true);
	        $('#tier3').attr('disabled', true);
	    } else {
	        var code1 = getCode($('#tier1 option:selected').text(), 1);
	        prepareList(code1, $('#tier2'), 1);
	        $('#tier2').val('none');
	        $("#tier2").attr('disabled', false);
	        $('#tier3').val('none');
	    }
	});

	$('#tier2').change(function () {
	    if ($(this).val() == 'none') {
	        $('#tier3').val('none');
	        prepareList('', $("#tier3"), 0);
	        $('#tier3').attr('disabled', true);
	    } else {
	        var code2 = getCode($('#tier2 option:selected').text(), 2);
	        prepareList(code2, $('#tier3'), 2);
	        $('#tier3').val('none');
	        $('#tier3').attr('disabled', false);
	    }
	});

	function getCode(text, tier) {
	    if (tier == 1) {
	        return text.substring(1, 4);
	    } else {
	        return text.substring(1, 5);
	    }
	}

	function prepareList(code, list, level) {
	    if (level == 1) {
	        list.children('option').each(function () {
	            if ($(this).text().substring(1, 4) == code || $(this).text() == 'None') {
	                $(this).show();
	            } else {
	                $(this).hide();
	            }
	        });
	    } else if (level == 2) {
	        list.children('option').each(function () {
	            if ($(this).text().substring(1, 5) == code || $(this).text() == 'None') {
	                $(this).show();
	            } else {
	                $(this).hide();
	            }
	        });
	    } else {
	        list.children('option').each(function () {
	            if ($(this).text() != 'None') {
	                $(this).hide();
	            }
	        });
	    }
	}