我有动态表单,..我用它来填充其他选择选项,它可以工作
$(document).ready(function() {
$("#itemRows").on("change", ".jenis", function() {
var id = $(this).val();
var dataString = 'jenis=' + id;
var par = $(this);
$.ajax({
type: "POST",
url: "ajax_menu.php",
data: dataString,
cache: false,
success: function (html) {
par.siblings(".bahan").html(html);
}
});
});
});
演示动态表单小提琴
如果我在 html 中使用它,它将正常工作:
<div id="itemRows">
<select name="jenis" class="jenis">
<option selected="selected">--Jenis Makanan--</option>
<option value="1">Makanan Pokok</option>
<option value="2">Daging Telur</option>
<option value="3">Buah</option>
<option value="4">Seafood</option>
<option value="5">Bijian</option>
<option value="6">Sayuran</option>
<option value="7">Susu Minyak</option>
</select>
<select name="bahan" class="bahan">
<option selected="selected">--Pilih Bahan--</option>
</select>
</div>
但是如果我在我的 html 中使用它,.. 它不起作用
<table class="table table-striped" id="itemRows" cellpadding="3">
<tbody>
<tr>
<th scope="col">No.</th>
<th scope="col">Jenis</th>
<th scope="col">Nama Bahan</th>
<th scope="col">
<input onclick="addRow(this.form);" type="button" value="Add row">
</th>
</tr>
<tr class="1">
<td>1</td>
<td>
<select name="jenis" class="jenis">
<option selected="selected">--Jenis Makanan--</option>
<option value="1">Makanan Pokok</option>
<option value="2">Daging Telur</option>
<option value="3">Buah</option>
<option value="4">Seafood</option>
<option value="5">Bijian</option>
<option value="6">Sayuran</option>
<option value="7">Susu Minyak</option>
</select>
</td>
<td>
<select name="bahan" class="bahan">
<option selected="selected">--Pilih Bahan--</option>
</select>
</td>
<td>
<input type="button" value="Remove" onclick="removeRow(1);">
</td>
</tr>
</tbody>
</table>
知道为什么它不起作用吗?