我有一个表单,它在页面加载时具有三个输入——2 个选择框和 1 个文本框。
我创建了一个 AJAX 调用,它将根据用户在第一个选择框中选择的内容填充第二个选择框。我还有一个按钮,它将具有唯一名称和 ID 的相同输入字段附加到表单中。
我遇到的问题是试图找出哪个选择框已更改。到目前为止,当页面加载时,我可以选择一个选项并填充第二个选择框,但是当我附加另一组输入字段并从第二个选择框中进行选择时,它不会填充相应的选择框。
如果我从页面加载时显示的选择框中进行选择,而不是填充其相应的选择框,它会填充新附加的选择框。
这是代码:
$(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
语句(你可以命名)来尝试这个。