php - Codeigniter Ajax Dependent Dropdown 在 foreach 语句中不起作用
问题描述
我在同一页面中创建了 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 循环中的下拉列表,所以请尝试使用如下所示的 class
$('.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;
});
推荐阅读
- macos - 有什么方法可以在 macOS 机器中为 window(.exe) 构建颤振桌面应用程序?
- c# - C# LINQ 获取通用列表 T 的 id
- java - 获取 java.lang.IllegalArgumentException:org.hibernate.hql.internal.ast.QuerySyntaxException:运行查询后出现意外令牌
- telegram - 使用 pm2 在多个集群中运行电报机器人
- java - 字符串不变性如何提高安全性?
- json - 只接收部分消息
- huawei-mobile-services - 无法使用云调试来测试我的华为 apk
- python - 我可以通过 Python 中的套接字编程访问 IP 摄像机 PTZ 端口并向其发送十六进制字节吗?
- azure - 为什么 azure artifacts 包含所有参考 3rd 包
- angular - Angular Spectator 测试的 `within` 等价物