Codeigniter Ajax Dependent Dropdown 在 foreach 语句中不起作用

Question

我在同一页面中创建了 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>

Answer 1

您应该尝试使用 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;
    });