4

私のページには 3 つの html select タグがあります。

これら 3 つの select タグに次の機能を持たせたい:

selectA を変更すると、 selectB よりも selectA に従って自動変更されます。selectB のオプションが作成されている場合、selectB を selectC よりも変更すると、selectB に従って自動変更されます。

(

例えば...

最初の selectA のオプションには、 singer 、 movie star 、 selectB が空です。

歌手オプションがチェックされたとき、selectB 自動作成オプション "Lady Gaga"、"Celine Dion"、"Whitney Houston"、3 人の歌手が作成された場合、"Lady Gaga" をチェックしたとき、selectC は "birthday"、"Facebook" を作成します。 「google+」オプション。

映画スター オプションがチェックされている場合、selectB 自動作成オプション "Bruce Willis" 、"Matt Damon" 、"Will Smith"、3 人の映画スターが作成されている場合、"Bruce Willis" をチェックした場合、selectC は "birthday" 、"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>');

ご覧のとおり、イベント ハンドラーをDOM にアタッチ#service_typeした後、要素を DOM に追加しています。このため、イベント委任を使用する必要があります。これは、jQuery のメソッドで実行できます。.on()

$('#second_li').on('change', '#service_type', function () {
    $.ajax({
        // 
    });
});
  • #second_li要素はページ上で静的でなければならないことに注意してください。それ以外の場合は、別のセレクターを使用してください。

参考文献:

  • .on()- jQuery API ドキュメント
于 2013-06-04T03:48:41.153 に答える