JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<select name="" id="a">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="b">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="c">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<select name="" id="d">
    <option value="0">Select</option>
    <option value="1">Milk</option>
    <option value="2">Eggs</option>
    <option value="3">Cheese</option>
    <option value="4">Butter</option>
    <option value="5">Pizza</option>
</select>
<a href="#" id="reset">Reset Options</a>

CSS

* {font-family: sans-serif; text-decoration: none; font-size: 0.9em;}

JavaScript

$(document).ready(function(){
    var a, b, c, d;
    $("#b, #c, #d").prop("disabled", true);
    $("#a").change(function(){
        a = $(this).val();
        $("#b").find('option[value="' + a + '"]').prop("disabled", true);
        $("#b").prop("disabled", false);
    });
    $("#b").change(function(){
        b = $(this).val();
        $("#a").prop("disabled", true);
        $("#c").find('option[value="' + a + '"]').prop("disabled", true);
        $("#c").find('option[value="' + b + '"]').prop("disabled", true);
        $("#c").prop("disabled", false);
    });
    $("#c").change(function(){
        c = $(this).val();
        $("#a").prop("disabled", true);
        $("#b").prop("disabled", true);
        $("#d").find('option[value="' + a + '"]').prop("disabled", true);
        $("#d").find('option[value="' + b + '"]').prop("disabled", true);
        $("#d").find('option[value="' + c + '"]').prop("disabled", true);
        $("#d").prop("disabled", false);
    });
    $("#d").change(function(){
        d = $(this).val();
        $("#a").prop("disabled", true);
        $("#b").prop("disabled", true);
        $("#c").prop("disabled", true);
    });
    $("#reset").click(function(){
        $("#a").prop("disabled", false);
        $("#b, #c, #d").prop("disabled", true);
        $("#a, #b, #c, #d").val(0);
        return false;
    });
});