jQuery dropdown select event

Question

Is there a specific event for when a user selects an item in a dropdown box? I am creating a fairly large form that uses multiple dropdown boxes. On load all but the first are disabled, as the user selects the first option the options in the second box change using AJAX and I want to remove the attribute disabled.

$('#site_id').on('change', function(event) {
    $('#access_type_id').removeAttr('disabled');
});

The trouble I am having is that .change() seems to be fired when the options in a dropdown change making following dropdown boxes enabled before I actually want them to be. Is there an alternative event I can use in place of change to only "enable" a form field once the user has made their selection in the previous dropdown?

UPDATE

I managed to solve this by not using the change event at all and placing my removeAttr in the success section of my AJAX call. An example is below. This allowed me to make the "next" dropdown enabled at the time as populating its options.

$('#access_speed_id').on('select2-blur', function(event){
    $.ajax({
        async: true,
        data: $('#access_speed_id').serialize(),
        dataType: 'html',
        success: function(data, textStatus) {
            $('#cdr_id').removeAttr('disabled');
            $('#cdr_id').html(data);
        },
        type: 'post',
        url: '/services/specificCdrs'
    });
});

its a bit confusing what do you actually want? can you set up a jsfiddle or explain it in more detail — Mandeep Jain
– Mandeep Jain, Commented Jul 31, 2013 at 9:35

Nitin Chaurasia · Accepted Answer · 2013-07-31 09:40:11Z

3

Try Below code:

<select id="drop1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="drop2"></select>

Jquery

$(document).ready(function(){
$("#drop2").attr("disabled", true);
$("#drop1").change(function(){
    $("#drop2").attr("disabled", false);
    //Put your ajax code here and bind like below code
    $("#drop2").append(new Option("option text", "value"));
    $("#drop2").append(new Option("xxx","1"));        
});
});

Demo: http://jsfiddle.net/J5kmz/

answered Jul 31, 2013 at 9:40

Nitin Chaurasia

2631 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery dropdown select event

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related