JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<table>
    <tbody>
        <tr>
            <td>
                <select name="type0">
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </td>
            <td>
                <select name="item0">
                    <option class="1" value="p">P</option>
                    <option class="1" value="q">Q</option>
                    <option class="2" value="x">X</option>
                    <option class="2" value="y">Y</option>
                    <option class="3" value="m">M</option>
                    <option class="3" value="n">N</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="type1">
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </td>
            <td>
                <select name="item1">
                    <option class="1" value="p">P</option>
                    <option class="1" value="q">Q</option>
                    <option class="2" value="x">X</option>
                    <option class="2" value="y">Y</option>
                    <option class="3" value="m">M</option>
                    <option class="3" value="n">N</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var $types = $('select[name^="type"]');
$types.each(function (k, v) {
    $(v).change(function (e) {
        var $items = $('select[name="item' + k + '"]'),
            $options = $items.find('option');
        
        $options.each(function(key, option) {
            if ($(option).prop('class') != $(v).val()) {
                $(option).prop('disabled', true);
            } else {
                $(option).prop('disabled', false);
                $(option).prop('selected', true);
            }
        });
    });
});