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

var availableSizesForColors = {
    '2': ['6'],
    '3': ['7', '8'],
    '4': ['9', '10']
};

$('#color').change(function() {
    var availableSizes = availableSizesForColors[this.options[this.selectedIndex].value];
    $('#size option').prop('disabled', function () { return $.inArray(this.value, availableSizes) == -1 });
});