动态Dropdown联动异常：新增表单正常，编辑表单无响应

我实现了动态Dropdown联动效果：选择初始Dropdown后，根据条件显示对应子Dropdown。用Javascript和AJAX JQuery开发，新增表单中正常工作，但在模态框承载的编辑表单里，Dropdown的onChange事件完全无效果。

编辑模态框的ID是：id="editcomplaint{{$data->id_complaint}}"

我的原JS代码： #

<script>
        $(document).ready(function() {
            // Function to handle dropdown logic
            function handleDropdownChange(jenis) {
                // Sembunyikan kedua dropdown awalnya
                $('#id_asset').hide();
                $('#id_repeater').hide();

                if (jenis) {
                    $('#loadingIndicator').show();

                    // Reset dropdown
                    $('#id_asset').html('<option value="">-- Pilih Asset --</option>');
                    $('#id_repeater').html('<option value="">-- Pilih Repeater --</option>');

                    $.ajax({
                        url: "/api/fetch-dropdown-data",
                        method: 'POST',
                        dataType: 'json',
                        data: {
                            jenis: jenis,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            console.log(response);

                            if (jenis === 'KP') {
                                $('#id_asset').show();
                                // Mengisi dropdown asset
                                $.each(response.assets, function(index, val) {
                                    $('#id_asset').append('<option value="'+val.id+'">'+val.location_eam+'</option>');
                                });
                            } else if (jenis === 'Radio') {
                                $('#id_repeater').show();
                                // Mengisi dropdown repeater
                                $.each(response.repeaters, function(index, val) {
                                    $('#id_repeater').append('<option value="'+val.id+'">'+val.loc_rep+'</option>');
                                });
                            }

                            $('#loadingIndicator').hide();
                        },
                        error: function(result) {
                            console.error('Error fetching dropdown data:', result);
                            $('#loadingIndicator').hide();
                        }
                    });
                }
            }

            // Event listener untuk perubahan pada dropdown "jenis"
            $('#jenis').change(function(event) {
                var jenis = this.value;
                handleDropdownChange(jenis);
            });

            // Cek apakah form adalah form update dan ada nilai default pada "jenis"
            var defaultJenis = $('#jenis').val();
            if (defaultJenis) {
                handleDropdownChange(defaultJenis);
            }
        });
    </script>

问题原因 #

1. 事件绑定失效：原代码在$(document).ready()里直接绑定#jenis的change事件，但编辑模态框是页面加载后动态生成的，初始化时该元素还不存在，导致事件未绑定到模态框内的#jenis上。
2. 全局ID冲突：直接使用$('#id_asset')这类全局选择器，会操作页面上所有同ID的元素，编辑模态框内的元素会和新增表单的元素产生冲突。

解决方案 #

核心修改点 #

1. 改用事件委托绑定事件：将事件绑定到静态父元素（如document），限定只监听编辑模态框内的#jenis元素，确保动态生成的元素能触发事件。
2. 基于模态框上下文操作元素：所有子Dropdown的操作都基于当前触发事件的#jenis所在的模态框，避免影响其他表单。
3. 模态框显示时初始化Dropdown：编辑表单的模态框是动态渲染的，需在模态框显示后再初始化Dropdown，而非页面加载时。

修改后的完整JS代码 #

<script>
    $(document).ready(function() {
        // 处理Dropdown逻辑，新增modal参数作为上下文
        function handleDropdownChange(jenis, modal) {
            // 从当前模态框内获取目标元素
            const $assetDropdown = modal.find('#id_asset');
            const $repeaterDropdown = modal.find('#id_repeater');
            const $loading = modal.find('#loadingIndicator');

            // 隐藏子Dropdown
            $assetDropdown.hide();
            $repeaterDropdown.hide();

            if (jenis) {
                $loading.show();

                // 重置Dropdown选项
                $assetDropdown.html('<option value="">-- Pilih Asset --</option>');
                $repeaterDropdown.html('<option value="">-- Pilih Repeater --</option>');

                $.ajax({
                    url: "/api/fetch-dropdown-data",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        jenis: jenis,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        console.log(response);

                        if (jenis === 'KP') {
                            $assetDropdown.show();
                            // 填充Asset选项
                            $.each(response.assets, function(index, val) {
                                $assetDropdown.append('<option value="'+val.id+'">'+val.location_eam+'</option>');
                            });
                            // 回显编辑时的选中值
                            const selectedAssetId = modal.find('#id_asset').data('selected');
                            if (selectedAssetId) {
                                $assetDropdown.val(selectedAssetId);
                            }
                        } else if (jenis === 'Radio') {
                            $repeaterDropdown.show();
                            // 填充Repeater选项
                            $.each(response.repeaters, function(index, val) {
                                $repeaterDropdown.append('<option value="'+val.id+'">'+val.loc_rep+'</option>');
                            });
                            // 回显编辑时的选中值
                            const selectedRepeaterId = modal.find('#id_repeater').data('selected');
                            if (selectedRepeaterId) {
                                $repeaterDropdown.val(selectedRepeaterId);
                            }
                        }

                        $loading.hide();
                    },
                    error: function(result) {
                        console.error('Error fetching dropdown data:', result);
                        $loading.hide();
                    }
                });
            }
        }

        // 事件委托：监听所有编辑模态框内的#jenis变化
        $(document).on('change', '.edit-modal #jenis', function() {
            const jenis = this.value;
            // 获取当前元素所在的模态框上下文
            const $modal = $(this).closest('.edit-modal');
            handleDropdownChange(jenis, $modal);
        });

        // 模态框显示时初始化Dropdown（适配编辑表单场景）
        $('.edit-modal').on('shown.bs.modal', function() {
            const $modal = $(this);
            const defaultJenis = $modal.find('#jenis').val();
            if (defaultJenis) {
                handleDropdownChange(defaultJenis, $modal);
            }
        });
    });
</script>

对应修改HTML部分 #

给编辑模态框添加通用类edit-modal，同时给子Dropdown添加data-selected属性保存初始选中值：

<div class="modal fade edit-modal" id="editcomplaint{{$data->id_complaint}}" tabindex="-1" aria-hidden="true">
    <!-- 模态框内容 -->
    <select id="jenis" value="{{$data->jenis}}">
        <!-- 你的Dropdown选项 -->
    </select>
    <!-- 保存编辑时的初始Asset ID -->
    <select id="id_asset" data-selected="{{$data->asset_id}}"></select>
    <!-- 保存编辑时的初始Repeater ID -->
    <select id="id_repeater" data-selected="{{$data->repeater_id}}"></select>
    <div id="loadingIndicator" style="display:none;">加载中...</div>
</div>

内容的提问来源于stack exchange，提问作者Irfan Chaniago