CODEWITHSUNDEEP
jquery
shiv keerthi
shiv keerthi

Reputation: 32

How to enable a dropdown only after previous dropdown in value is changed

Springs Hibernate 

            <div class="form-group col-md-3">
                <select class="selectpicker tech_drop" style="width: 175px; height: 25px" name="Technology" id="tech2" disabled="disabled">
                    <option></option>
                    <option>Springs</option>
                    <option>Hibernate</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <select class="selectpicker tech_drop" style="width: 175px; height: 25px" name="Technology" id="tech3" disabled="disabled">
                    <option></option>
                    <option>Springs</option>
                    <option>Hibernate</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <select class="selectpicker tech_drop" style="width: 175px; height: 25px" name="Technology" id="tech4" disabled="disabled">
                    <option></option>
                    <option>Springs</option>
                    <option>Hibernate</option>
                </select>
            </div>

I have total 12 dropdowns like this what I need to do is to enable second dropdown only after first is selected and enable third only when second is selected and so on I have tried with .next() but its not working

Upvotes: 0

Views: 94

Answers (2)

sarath s rajendran
sarath s rajendran

Reputation: 398

Maybe the below code will help.

$(".tech_drop").change(function(obj){
  var next_select = $(this).closest('div').next().find('select');
  $(next_select).prop('disabled', false);
})

Upvotes: 1

Vignesh VS
Vignesh VS

Reputation: 939

You can add this JQuery code to disable or enable Dropdown. 

$(function(){
     $("#tech2").prop('disabled', false);
        $("#tech2").click(function(){
            $("#tech3").prop('disabled', false);
        });
        $("#tech3").click(function(){
            $("#tech4").prop('disabled', false);
        });
    });

I have attached my JSfiddle link to this answer. You can also try this. JSFiddle

Upvotes: 1

Related Questions