0

動的ドロップダウンを作成する必要があります。最初のドロップダウンの値に基づいて、2 番目のドロップダウンのデータをロードできます。その後、ドロップダウンの新しい行も追加する必要があります。新しいドロップダウン行を追加できます。しかし、新しく追加されたドロップダウンの値を動的にロードすることはできません。

これは、2 番目のドロップダウンのデータをロードするための jQuery です。

<script type="text/javascript">
$(document).ready(function(){
     $("#state").change(function() {
         alert('ok');
         var state = $("#state :selected").text();
        $.ajax({
                url:"http://localhost:8888/ajax/search_attendee.php",
                type:"post",
                data:'state='+ state,
                dataType: "html",
                success:function(data){
                $("#trainer").html(data);
                }
            });

     });

    });
</script>

これは、新しい行をロードするための jQuery です。この関数で行を追加できます。しかし、2 番目のドロップダウンのデータを読み込めません。誰でもこれを行うのを手伝ってもらえますか?

<script type="text/javascript">
$(function() {
     var addDiv = $('#addinput');
     var i = $('#addinput p').size() + 1;

     $('#addNew').live('click', function() {
      $('<p>'+
                   '<table id="datatable"><tr><td width="220"></td><td>'+
                    '<select name="state_' + i +'" id="state">'+
                    '<option value="0">Select State</option>'+
                    '<option value="1">QLD</option>'+
                    '<option value="2">NSW</option>'+
                    '<option value="3">VIC</option>'+
                    '<option value="4">WA</option>'+
                    '<option value="5">ACT</option>'+
                    '<option value="6">NT</option>'+
                    '<option value="7">SA</option>'+
                    '<option value="8">TAS</option>'+
                    '</select>'+
                    '<select name="trainer_' + i +'" id="trainer"><option>Select Trainer</option></select>'+
                    '<a href="#" id="remNew">Remove</a></td></tr></table></p>').appendTo(addDiv);
         i++;


 });

    $('#remNew').live('click', function() { 
            if( i > 2 ) {
            $(this).parents('p').remove();
            i--;
       }

});
});
</script>
4

1 に答える 1

1

on動的に追加された要素について、イベントを最も近い静的な親の使用サインに委任する必要があります。#stateあなたの場合はどれですか

    $(document).on('change','#state',function() {
        alert('ok');
        var state = $("#state :selected").text();
       .....

最新の jquery バージョン、つまり 1.6+ を使用している場合は、live が非推奨になっているlive()ため、変更する必要がある場合もあります。on()

  $(document).on('click','#addNew',function() {
     ....


  $(document).on('click','#remNew', function() { 
     ...

ただし、これは機能しますが、挿入時にドキュメントに存在する最も近い静的要素に動的要素を委譲する方が、ドキュメント自体をパフォーマンス的に使用するよりも優れています。

于 2013-10-18T06:05:26.010 に答える