javascript - 通过 ajax 成功在动态克隆选择选项中填充数据

Question

我有三个选择选项菜单，如 Department、Sub Department 和 Person，以及一个用于克隆主题的按钮。我想根据选定的部门和人员根据选定的子部门填充子部门。我可以通过 ajax 获取数据，但无法将其附加到第二个或子部门选择选项

我的 HTML 代码

<input onclick="addRow()" type="button" value="+" style="float: left">
                    <div id="departs" class="row">
                        <table id="clonedtable">
                            <thead>
                            <tr>
                                <td>Department</td>
                                <td>Sub Department</td>
                                <td>Person</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="aaa">
                                <td>
                                    <select id="departments" name="" class="required form-control departments">
                                        <option value="0">--Select Department--</option>
                                        @foreach($department as $dep)
                                            <option value="{{$dep->id}}">{{$dep->department}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="bbb">
                                    <select id="Sub_departments" class="required form-control Sub_departments">
                                        <option value="0">--Select Sub Department--</option>
                                    </select>
                                </td>
                                <td>
                                    <select id="name" name="name[]" class="required form-control">
                                        <option value="0">--Select Person--</option>
                                        {{--@foreach($name as $names)--}}
                                        {{--<option value="{{$names->id}}">{{$names->name}}</option>--}}
                                        {{--@endforeach--}}
                                    </select>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

我的 JAVA 脚本代码

    var counter = 0;
    function addRow() {
        //copy the table row and clear the value of the input, then append the row to the end of the table
        $("#clonedtable tbody tr:first").clone().find("input").each(function () {
            // $(this).val('');
        }).end().appendTo("#clonedtable");
        counter++;
        // $("#removeclone").removeAttr("disabled");

    };

        $("#clonedtable").on('change','#departments',function () {

            // alert($(this).val());
            $dep_id = $(this).val();
            $(this).closest("td").next("td").find(".Sub_departments option").remove(); // this works fine
            // $(this).closest("td").next("td").find(".Sub_departments option").append('<option value=' +0+ '><--Select Sub Department--> </option>');

            $.ajax({
                url: 'get_sub_departments/'+$dep_id+'',
                type: 'GET',
                data: data,
                dataType: 'json',
                success: function (data) {
                    alert($(this).val());
                    // $(this).closest("td").next("td").find(".Sub_departments option").remove();
                    $(this).closest("td").next("td").find(".Sub_departments").append('<option value=' +0+ '><--Select Sub Department--> </option>'); //this won't work inside ajax but works outside of it
                    for (var i = 0; i < data.length; i++) {
                        $(this).closest("td").next("td").find(".Sub_departments").append('<option value=' + data[i].id + '>' + data[i].sub_department + '</option>'); //this won't work inside ajax but works fine outside
                    }
                }
            });

        });

Answer 1

您需要将此代码替换为以下代码:

您的代码:

$(this).closest("td").next("td").find(".Sub_departments option").append('<option value=' +0+ '><--选择子部门--> ');

替换代码:

$(this).closest("td").next("td").find(".Sub_departments").append('<option value=' +0+ '><--选择子部门--> ');