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

Question

我有三个选择选项菜单，例如部门、子部门和人员，以及一个克隆主题的按钮。 我想根据所选部门填充子部门，并根据所选子部门填充人员。 我可以通过 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+ '> ');

Answer 2

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 will work
                            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 will work
                            }
                        }
                    });

                });

只需删除 $(this).closest("td").next("td").find(".Sub_departments option") 中的选项，因为我们将选项列表附加到选择元素并使用波浪号来查看您代码干净。

Answer 3

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <title>test</title>
    </head>
    <body>

        <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>
                                    <option value="1">option1</option>
                                    <option value="2">option2</option>
                                </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>

                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
        <script>
            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>');

                    $(this).closest("td").next("td").find(".Sub_departments").append(`<option value="0"> test</option>`); //this will work

                });

        </script>

    </body>
</html>

检查这是否有效。它也适用于 ajax。

Answer 4

找到解决方案 1：做一个数组 2：将ajax数据推送到新数组 3：并在ajax之外访问它 像这样

        $("#clonedtable").on('change','#departments',function () {
            $dep_id = $(this).val();
            $(this).closest("td").next("td").find(".Sub_departments option").remove(); // this works fine

            $.ajax({
                url: 'get_sub_departments/'+$dep_id+'',
                type: 'GET',
                data: data,
                dataType: 'json',
                success: function (data) {
                    data1 =data; // here added data to data1
                    $(this).closest("td").next("td").find(".Sub_departments").append(`<option value="0"> test</option>`); //this will work
                    alert('success')
                },
                fail:function (data) {
                  alert('failed')
                }

        });
            $(this).closest("td").next("td").find(".Sub_departments").append(`<option value="0"><--Select Sub Department--> </option>`); //this will work
            for (var i = 0; i < data1.length; i++) {
                $(this).closest("td").next("td").find(".Sub_departments").append('<option value=' + data1[i].id + '>' + data1[i].sub_department + '</option>'); //this will work
            }
        });