CrazyEngineers
CrazyEngineers

  • How to do this using jquery for the dropdown functionality for Multiple Dropdowns ?

    RajanV

    Member

    Updated: Oct 27, 2024
    Views: 1.4K
    I want to check whether the following scenario is possible with Jquery. please provide the possible solution to do this. Also check this fiddle what i did till now, but it has some problems : <a href="https://jsfiddle.net/rajan222000/uLcn3a0m/" target="_blank" rel="nofollow noopener noreferrer">Five combobox functionality - JSFiddle - Code Playground</a>

    Consider the following combo boxes from Box1 to Box5 :
    YtqSS
    Each combo box is dependent on each other.

    1. Boxes from Box2 to Box5 have values ranges from A to E, with Disabled as first values as shown. i.e. Box2 will contain values: Disabled, A, B, C, D, and E.
    2. Box1 contains values Default, A, B, C, D, and E.
    Conditions :

    Th48r
    Could any one please tell me what should i do.
    0
    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies

  • Manish Goyal

    Member • Nov 6, 2014 

    <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>
    <option value="D">D</option>
    <option value="E">E</option>
</select>

<select name="n2" id="box_g2">
    <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">
    <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">
    <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">
    <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>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script>
        $("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);
                }
            }
           
        });
</script>
    didn't spent much time but this should cover all the cases except 5th and 6th,
    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register