[英]Codeigniter Ajax Dependent Dropdown doesn't work inside foreach statement
我在同一頁面中做了 2 個依賴下拉菜單。 其中之一是在 foreach 語句中,它根本不起作用。 同時另一個運作良好。 id 的名字完全不同。 兩個依賴下拉列表都引用了控制器中的相同功能。 我認為這是主要問題並嘗試制作不同的功能,但它沒有改變任何東西。
看法 :
<tr>
<td><label>Category</label></td>
<td>
<div class="form-group">
<select id="edit_category" class="form-control" name="edit_category">
<option value="">Select Category</option>
<?php foreach ($categories as $cat) : ?>
<option <?php ?> value="<?php echo $cat->id; ?>"><?php echo $cat->name
</option>
<?php endforeach; ?>
</select>
</div>
</td>
</tr>
<tr>
<td><label>Product</label></td>
<td>
<div class="form-group">
<select name="edit_product" id="edit_product" class="form-control" style="width:350px">
<option value="">Select Product</option>
</select>
</div>
</td>
</tr>
腳本 :
<script type="text/javascript">
$(document).ready(function() {
//DEPENDENT DROPDOWN - ADD ITEM :
$('#add_category').on('change', function() {
$('#add_product').html('<option value="">Select Product</option>');
var catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: catID
},
async: true,
dataType: "json",
success: function(data) {
$('#add_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
}); //END - DROPDOWN - ADD ITEM
//DEPENDENT DROPDOWN - EDIT ITEM :
$('#edit_category').on('change', function() {
$('#edit_product').html('<option value="">Select Product</option>');
var edit_catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: edit_catID
},
async: true,
dataType: "json",
success: function(data) {
$('#edit_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
});
});
</script>
您應該嘗試使用 class 而不是 id 因為 id 是唯一的並且您在 foreach 循環中的下拉列表所以請嘗試使用如下所示的類
$('.add_category').on('change', function() {
$('#add_product').html('<option value="">Select Product</option>');
var catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: catID
},
async: true,
dataType: "json",
success: function(data) {
$('#add_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
}); //END - DROPDOWN - ADD ITEM
//DEPENDENT DROPDOWN - EDIT ITEM :
$('.edit_category').on('change', function() {
$('#edit_product').html('<option value="">Select Product</option>');
var edit_catID = $(this).val();
$.ajax({
url: "<?php echo site_url('admin/item/dependentDL') ?>",
method: "POST",
data: {
id_p_category: edit_catID
},
async: true,
dataType: "json",
success: function(data) {
$('#edit_product').html(data);
},
error: function(error) {
alert(error);
}
});
return false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.