4

我的页面有三个 html 选择标签。

我希望这三个选择标签具有以下功能：

当我更改 selectA 时， selectB 会根据 selectA 自动更改。当selectB的选项已经创建时，当我改变selectB而不是selectC根据selectB自动改变。

(

例如...

首先selectA的选项有歌手，电影明星，selectB只是空的。

当歌手选项勾选时，selectB自动创建选项“Lady Gaga”，“Celine Dion”，“Whitney Houston”，如果三个歌手已经创建，当我勾选“Lady Gaga”时，selectC将创建“生日”，“Facebook”， “谷歌+”选项。

当电影明星选项选中时，selectB自动创建选项“布鲁斯威利斯”，“马特达蒙”，“威尔史密斯”，如果三个电影明星已经创建，当我选中“布鲁斯威利斯”时，selectC将创建“生日”，“Facebook " 、 "google+" 选项。

)

我的问题是...当我更改 selectB 时， $("#selectB_id").change() 不起作用

以下是我的 javascript 代码：

$(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){}

    }); 

});

});

4

2 回答 2

4

使用事件委托：

$("body").on('change', '#service_type', function() { 
    // your code
});
于 2013-06-04T03:43:49.683 回答
4

在这条线上：

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

如您所见，在将事件处理程序附加到它之后，您正在将#service_type元素添加到 DOM 。因此，您必须使用事件委托。这可以通过jQuery 中的方法来完成：.on()

$('#second_li').on('change', '#service_type', function () {
    $.ajax({
        // 
    });
});
  • 请注意，您的#second_li元素在页面上必须是静态的。否则使用另一个选择器。

参考：

  • .on()- jQuery API 文档
于 2013-06-04T03:48:41.153 回答