当我单击"添加行"按钮时,类别下拉列表成功加载,但是当我从此类别列表中选择一个选项时,子类别不会加载任何列表。
用于动态添加行的JavaScript函数:
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td> <td><select name='parent_catt"+i+"' id='parent_catt' class='form-control input-md'><?php while($row2 = $query2_parent->fetch_array()): ?><option value='<?php echo $row2["cat_id"]; ?>'><?php echo $row2["category"]; ?></option><?php endwhile; ?></select></td><td><select name='sub_catt"+i+"' id='sub_catt' class='form-control input-md'></select></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
jQuery函数加载子类别:
<script type="text/javascript">
$(document).ready(function() {
$("#parent_catt").click(function() {
alert("clicked");
$(this).after('<div id="loader"><img src="images/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_catt=' + $(this).val(), function(data) {
$('#sub_catt').html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
获取细节的PHP代码:
<?php
include('dbconnect.php');
$parent_catt = $_GET['parent_catt'];
$query2 = $con->query("SELECT * FROM subcategory WHERE cat_id = '$parent_catt'");
while($row2 = $query2->fetch_array()) {
echo "<option value='$row2[subcat_id]'>$row2[subcategory]</option>";
}
?>
替换此行
$("#parent_catt").click(function() {
通过这个
$(document).off("click", "#parent_catt").on("click", "#parent_catt", function(){
使用jquery.on函数
$( "#parent_catt" ).on( "click", function() {
alert("clicked");
});