jq 下拉列表选中事件,jQuery下拉选择事件

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'

});

});

解决方案

Try Below code:

Volvo

Saab

Mercedes

Audi

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"));

});

});