如何在 Laravel 刀片文件中使用 jquery 将选项附加到动态创建的选择元素答案

【问题标题】：How to append options to dynamically created select elements with jquery in Laravel blade file如何在 Laravel 刀片文件中使用 jquery 将选项附加到动态创建的选择元素
【发布时间】：2021-12-22 03:06:22
【问题描述】：

美好的一天。我有一个表单，我可以在其中动态地在输入元素上添加组。我在其中选择了元素。在我的控制器中，我返回数据以将选择元素填充到刀片文件中。在此之后，我使用 Jquery 将数据附加到选择元素。问题是，这适用于初始表单组（元素），但不适用于动态生成的表单组。请问可能是什么原因？或者有没有更好的方法来做到这一点？这是我的刀片 (html) 和 jquery 代码

刀片文件

                         <button id="add_counsel_button" type="button">Add</button>
                                <h5>Step 3: Case Counsels</h5>
                                <div id="dynamic_wrapper">
                                    <div class="field_wrapper" id="row1">
                                        <input type="text" style="width:50%!important;display: inline!important;"
                                            name="counsels[]" id="name1" data-number=1 class="form-control counsel-name">
                                        <input type="hidden" name="counsel_id[]" id="id1">
                                        <div class="counsel-list" id="counsel-list1"></div>
                                        <select name="roles[]" style="width:21%!important;display: inline!important;"
                                            class="form-control roles-list">
                                            <option value="#">Select Role</option>
                                        </select>
                                        <select name="representations[]"
                                            style="width:21%!important;display: inline!important;"
                                            class="form-control reps-list">
                                            <option value="#">Select Representation</option>
                                        </select>
                                    </div>
                                </div>

jquery：

$(document).ready(function() {
            //Setting the value from the controller
            var roles = {!! json_encode($roles->toArray()) !!};
            var reps = {!! json_encode($representations->toArray()) !!};

            $.each(roles, function(i, item) {
                $('.roles-list').append($('<option>', {
                    value: item.id,
                    text: item.role
                }));
            }); //want this to be appended to all 'roles-list' classes

            $.each(reps, function(i, item) {
                 $('.reps-list').append($ '<option>', {
                        value: item.id,
                        text: item.type
                    }); 
            });

            
            $(document).on('click', '#add_counsel_button', function() {
                i++;
                $('#dynamic_wrapper').append('<div class="field_wrapper" id="row' + i +
                    '"><input type="text" id="name' + i + '" data-number="' + i +
                    '" style="width:50%!important;display: inline!important;" name="counsels[]" class="form-control counsel-name"><input type="hidden" name="counsel_id[]" id="id' +
                    i + '"><div class="counsel-list" id="counsel-list' +
                    i +
                    '"></div> <select name="roles[]" style="width:21%!important;display: inline!important;" class="form-control roles-list"> <option value="#">Select Role</option></select><select name="representations[]" style="width:21%!important;display: inline!important;"class="form-control reps-list"><option value="#">Select Representation</option></select><a href="javascript:void(0);" class="remove_button" id="' +
                    i +
                    '" style="display: inline!important;"title="Remove field"> <span class="fa fa-trash"></span></a></div>'
                );
            });
});

【问题讨论】：

您是否在控制台中遇到任何错误？
不，我在控制台中没有收到任何错误
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript php jquery laravel dom

【解决方案1】：

您在附加选择标记之前附加选项。修改如下代码

$(document).ready(function() {
        //Setting the value from the controller
        var roles = {!! json_encode($roles->toArray()) !!};
        var reps = {!! json_encode($representations->toArray()) !!};
        roles_str = '';
        reps_str = '';
        $.each(roles, function(i, item) {
            roles_str += '<option value="'+item.id+'">'+item.role+'</option>';
        }); //want this to be appended to all 'roles-list' classes

        $.each(reps, function(i, item) {
            reps_str += '<option value="'+item.id+'">'+item.type+'</option>'; 
        });

        
        $(document).on('click', '#add_counsel_button', function() {
            i++;
            $('#dynamic_wrapper').append('<div class="field_wrapper" id="row' + i +
                '"><input type="text" id="name' + i + '" data-number="' + i +
                '" style="width:50%!important;display: inline!important;" name="counsels[]" class="form-control counsel-name"><input type="hidden" name="counsel_id[]" id="id' +
                i + '"><div class="counsel-list" id="counsel-list' +
                i +
                '"></div> <select name="roles[]" style="width:21%!important;display: inline!important;" class="form-control roles-list"> <option value="#">Select Role</option>'+roles_str+'</select><select name="representations[]" style="width:21%!important;display: inline!important;"class="form-control reps-list"><option value="#">Select Representation</option>'+reps_str+'</select><a href="javascript:void(0);" class="remove_button" id="' +
                i +
                '" style="display: inline!important;"title="Remove field"> <span class="fa fa-trash"></span></a></div>'
            );
        });
 });

【讨论】：