solution given from crazy eng

by Rajan Verma

HTML

<select name="n1" id="box_g1" onChange="dynamicSelect(this)">
	<option value="Default">Default</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>

<select name="n2" id="box_g2" disabled="disabled"
	onChange="dynamicSelect(this)">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>

<select name="n3" id="box_g3" disabled="disabled"
	onChange="dynamicSelect(this)">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>
<select name="n4" id="box_g4" disabled="disabled"
	onChange="dynamicSelect(this)">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>

</select>
<select name="n5" id="box_g5" disabled="disabled"
	onChange="dynamicSelect(this)">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>

</select>

JavaScript

$("document").ready(function(e){
            defaultValues();
           
            $("select").change(function(e){
               
                defaultValues();
               
                var temp = this;
               
                var current_value = $(this).val();
               
                $("select > option").each(function() {
                    $(this).attr("disabled", false);
                });
               
                if(($(this).attr("id") == "box_g2" && $(this).val() != 'Disabled') || $(this).attr("id") == "box_g1"){
                    $("select").each(function(e){
                        if(temp != this){
                            $("#" + $(this).attr("id") + " option[value='" + current_value + "']").attr("disabled", true);
                        }
                    });
                }
               
            });
       
            function defaultValues(){
                if($("#box_g1").val() == "Default"){
                    $("#box_g2").attr("disabled", true).val('Disabled');;
                    $("#box_g3").attr("disabled", true).val('Disabled');;
                    $("#box_g4").attr("disabled", true).val('Disabled');;
                    $("#box_g5").attr("disabled", true).val('Disabled');;
                } else {
                    $("#box_g2").attr("disabled", false);
                    $("#box_g3").attr("disabled", false);
                    $("#box_g4").attr("disabled", false);
                    $("#box_g5").attr("disabled", false);
                }
            }
           
        });