JSFiddle - React, Tailwind, and code Playground

HTML

<form id="test" name="test" method="post" action="">
        <label for="test"></label>
        <select name="color" id="color">
          <option value="1">---Select color---</option>
          <option value="2">T-Shirt - green</option>
          <option value="3">T-Shirt - blue</option>
          <option value="4">T-Shirt - yellow</option>
        </select>
    <br />
        <select name="size" id="size">
          <option value="5">---Select size---</option>
          <option value="6">XS</option>
          <option value="7">S</option>
          <option value="8">M</option>
          <option value="9">L</option>
          <option value="10">XL</option>
        </select>
    </form>

JavaScript

function disableAll() {
    $('#size option').each(function() {
    	$(this).attr('disabled','disabled');
    });
}
disableAll();
$('#color').change(function() {
	disableAll();
    $("#size").val('5');
	var selected = parseInt($(this).val());
    switch(selected) {
        case 1:
            disableAll();
            break;
        case 2:
            $("#size option[value='5']").removeAttr('disabled');
            $("#size option[value='6']").removeAttr('disabled');
            break;
        case 3:
            $("#size option[value='5']").removeAttr('disabled');
            $("#size option[value='7']").removeAttr('disabled');
            $("#size option[value='8']").removeAttr('disabled');
            break;
        case 4:
            $("#size option[value='5']").removeAttr('disabled');
            $("#size option[value='9']").removeAttr('disabled');
            $("#size option[value='10']").removeAttr('disabled');
    }
});