JSFiddle - React, Tailwind, and code Playground

by Rajan Verma

HTML

<select name="n1" id="box_g1">
    <option value="Default">Default</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select name="n2" id="box_g2" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select name="n3" id="box_g3" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

JavaScript

$(document).ready(function () {
$("select").change(function (e) {

    var id = $(this).attr("id");
    var value = this.value;

    $("select option").each(function () {

        var idParent = $(this).parent().attr("id");

        if (id != idParent) {
            if (this.value == value) {
                this.disabled = true;
            } else if ($("#box_g1 option:selected").val() != "Default") {
                $("#box_g2").prop("disabled", false);
                $("#box_g3").prop("disabled", false);
            } else {
                $("#box_g1 option,#box_g2 option,#box_g3 option").each(function () {
                    $(this).prop("disabled", false);
                });

                $("#box_g2").prop("disabled", true).val('Disabled');
                $("#box_g3").prop("disabled", true).val('Disabled');                   
            }
        }
      });
   });
 });