1

ページの読み込み時に 3 つの入力 (2 つの選択ボックスと 1 つのテキスト ボックス) を持つフォームがあります。

ユーザーが最初の選択ボックスで選択した内容に応じて、2 番目の選択ボックスにデータを入力する AJAX 呼び出しを作成しました。また、フォームに一意の名前と ID を持つまったく同じ入力フィールドを追加するボタンもあります。

私が抱えている問題は、どの選択ボックスが変更されたかを把握しようとすることです。現在、ページが読み込まれると、オプションを選択して2番目の選択ボックスに入力できますが、別の入力フィールドのセットを追加して2番目の選択ボックスから選択すると、対応する選択ボックスに入力されません.

対応する選択ボックスに入力する代わりに、ページの読み込み時に表示される選択ボックスから選択すると、新しく追加された選択ボックスに入力されます。

コードは次のとおりです。

$(document).ready(function() {
var i = $('.clonedInput').length;
var count = 2;

$('#prescriptions'+i).change(function() {
    alert(i);
    var value = $(this).val();
    var dataString = 'prescription='+value;
    $.ajax ({
        type: 'POST',
        url: '<?php echo base_url(); ?>index.php/patients/dynamic_ddl',
        data: dataString,
        cache: false,
        success: function(html) { $('#dosage'+i).html(html); } 
    });
});

$(function(){ 
    $('#btnAdd').click(function(){          
        $('#page_properties').append('<tr id="input'+count+'" class="clonedInput">'+
                                '<td><label for="prescriptions'+count+'">Prescription</label></td>'+
                                '<td><select id="prescriptions'+count+'" class="prescriptions" name="prescriptions'+count+'">'+
                                '<option selected="selected">--Select Prescription--</option>'+
                                '<?php foreach ($prescriptions_sel as $option):?>'+
                                '<option value="<?php echo $option['prescription']; ?>"><?php echo $option['prescription'];?></option>'+
                                '<?php endforeach ?></select></td>'+
                                '<td>Dosage: <select id="dosage'+count+'" name="dosage'+count+'" class="dosage">'+
                                '<option selected="selected">--Select Dosage--</option>'+
                                '</select>'+
                                'Add Dosage: <input type="text" name="new_dosage'+count+'" value="" /></td></tr>');
        $('#btnDel').removeAttr('disabled');
        count++;
        i++;
    });
}); 


$('#btnDel').click(function() {                 
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have                 
    $('#input' + num).remove(); // remove the last element                   

    // enable the "add" button                 
    $('#btnAdd').removeAttr('disabled'); 

    // if only one element remains, disable the "remove" button                 
    if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); 
    count--;
    i--;
});
$('#btnDel').attr('disabled','disabled');
});


私はこれに何時間も取り組んでおり、ifステートメント、forステートメント、foreachステートメント（名前を付けてください）でこれを試しています。

4

1 に答える 1

1

私があなたの言いたいことに従っているかどうかはよくわかりませんが、あなたのイベントは、動的に追加されたアイテムではなく、ドキュメントの準備ができたときに存在するアイテムでのみ発生するようです。その場合、問題が変更機能にある場合は、変更機能ではなくライブ機能を使用してイベントをバインドする必要があります。すなわち

$('#prescriptions'+i).change(function() {

する必要があります

$('#prescriptions'+i).live('change', function() {
于 2012-06-14T01:40:41.863 に答える