javascript - jQuery dropdown select event - Stack Overflow

admin管理员组

文章数量:1403522

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'
    });
});

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'
    });
});

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Oct 16, 2022 at 11:41 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 31, 2013 at 9:16 theMojoWilltheMojoWill 7611 gold badge22 silver badges99 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/J5kmz/

本文标签： javascriptjQuery dropdown select eventStack Overflow