Question

我有三个选择选项菜单，例如“部门”，“子部门”和“人”，还有一个用于克隆主题的按钮。我想基于所选部门填充子部门，并基于所选子部门填充人。我可以通过Ajax获取数据，但是无法将其附加到第二个或子部门选择选项

我的HTML代码

    /**
     * @Serializer\SerializedName("lastMessage")
     * @Serializer\Groups({"someGroup"})
     *
     * @return Message
     */
    public function getLastMessage(): ?Message
    {
        $criteria = Criteria::create()
            ->orderBy(['created_at' => Criteria::DESC])
            ->setMaxResults(1)
        ;

        $result = $this->messages->matching($criteria);

        return !$result->isEmpty() ? $result->first() : null;
    }

我的JAVA脚本代码

<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>

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”）中的选项，因为我们将optionlist附加到选择元素上，并且还使用代字号来查看您代码干净。

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

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

4 个答案: