My page has three html select tag.

I want these three select tags to have following functions:

When I change selectA , than selectB automatic change according selectA. When selectB's option has created , when I change selectB than selectC automatic change according selectB.

(

For example...

first selectA's option have singer , movie star , selectB just empty.

when singer option checked , selectB auto create option "Lady Gaga", "Celine Dion" , "Whitney Houston", If three singers have created , when I checked "Lady Gaga" , the selectC will create "birthday" , "Facebook" , "google+" options.

when movie star option checked , selectB auto create option "Bruce Willis" , "Matt Damon" , "Will Smith", If three movie stars have created , when I checked "Bruce Willis" , the selectC will create "birthday" , "Facebook" , "google+" options.

)

My problem is...when I change selectB , $("#selectB_id").change() not work

The following is my javascript code:

$(function(){
$("#lineselect").change( function() {
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#lineselect option:checked").val() , level:1 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);

            if( $("#lineselect").val() == 0 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
            }
            else if( $("#lineselect").val() == 1 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
                $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#service_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
            else if( $("#lineselect").val() == 2 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<input type="text" id="url_name" name="url_name"></input>');
            }
            else if( $("#lineselect").val() == 3 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#url_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
        },
        error: function(obj, status, err){}

    }); 

});

$("#service_type").change( function() {         // this change not work!!!
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#service_type option:checked").val() , level:2 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);            

            $("#third_li").html("");
            $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
            for( i=0; i<obj.length; i++)
            {
                $('#service_type').append($("<option></option>")
                                .attr("value",obj[i].id)
                                .text(obj[i].name)); 
            }

        },
        error: function(obj, status, err){}

    }); 

});

});

My page has three html select tag.

I want these three select tags to have following functions:

When I change selectA , than selectB automatic change according selectA. When selectB's option has created , when I change selectB than selectC automatic change according selectB.

(

For example...

first selectA's option have singer , movie star , selectB just empty.

when singer option checked , selectB auto create option "Lady Gaga", "Celine Dion" , "Whitney Houston", If three singers have created , when I checked "Lady Gaga" , the selectC will create "birthday" , "Facebook" , "google+" options.

when movie star option checked , selectB auto create option "Bruce Willis" , "Matt Damon" , "Will Smith", If three movie stars have created , when I checked "Bruce Willis" , the selectC will create "birthday" , "Facebook" , "google+" options.

)

My problem is...when I change selectB , $("#selectB_id").change() not work

The following is my javascript code:

$(function(){
$("#lineselect").change( function() {
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#lineselect option:checked").val() , level:1 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);

            if( $("#lineselect").val() == 0 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
            }
            else if( $("#lineselect").val() == 1 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');
                $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#service_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
            else if( $("#lineselect").val() == 2 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<input type="text" id="url_name" name="url_name"></input>');
            }
            else if( $("#lineselect").val() == 3 )
            {
                $("#second_li").html("");
                $("#third_li").html("");
                $("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>');
                for( i=0; i<obj.length; i++)
                {
                    $('#url_type').append($("<option></option>")
                                    .attr("value",obj[i].id)
                                    .text(obj[i].name)); 
                }
            }
        },
        error: function(obj, status, err){}

    }); 

});

$("#service_type").change( function() {         // this change not work!!!
    $.ajax({
        url: '/lineflow/ajaxgetselect',
        type:'POST',
        data:{ service_id:$("#service_type option:checked").val() , level:2 },
        success: function( res ){
            var obj = jQuery.parseJSON(res);            

            $("#third_li").html("");
            $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>');
            for( i=0; i<obj.length; i++)
            {
                $('#service_type').append($("<option></option>")
                                .attr("value",obj[i].id)
                                .text(obj[i].name)); 
            }

        },
        error: function(obj, status, err){}

    }); 

});

});

• javascript
• ajax
• jquery

• Try "on" instead of "change": $(...).on('change', ...) – Atber Commented Jun 4, 2013 at 3:43
• 1 @Atber There's no difference between those....change(func) is just a shortcut for .on("change", func) – Ian Commented Jun 4, 2013 at 3:47

2 Answers 2

On this line:

$("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>');

As you see, you are adding the #service_type element to the DOM, after attaching the event handler to it. For this reason, you must use event delegation. This can be done by .on() method in jQuery:

$('#second_li').on('change', '#service_type', function () {
    $.ajax({
        // 
    });
});

• Note that your #second_li element must be in static on the page. Otherwise use another selector.

References:

• .on() - jQuery API Documentation

Use event delegation:

$("body").on('change', '#service_type', function() { 
    // your code
});