Codeigniter Ajax Зависимый раскрывающийся список не работает внутри оператора foreach

Question

Я сделал 2 зависимых выпадающих на той же странице. Один из них - внутри оператора foreach, и он вообще не работает. Между тем другой работает хорошо. Имя идентификатора совершенно другое. Оба зависимых раскрывающихся списка относятся к одной и той же функции в контроллере. Я подумал, что это основная проблема, и попытался создать другую функцию, но она ничего не изменила.

ПРОСМОТР:

<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

Вы должны попробовать использовать класс вместо идентификатора, потому что идентификатор уникален и ваш выпадающий список в foreach l oop, поэтому, пожалуйста, попробуйте использовать класс, как показано ниже

  $('.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;
    });