我在选择依赖于另一个选择时遇到问题

Question

我创建了一个有 3 个选择的表单转发器，但问题是第一行成功，但其他行失败。如何在创建它们之前和之后访问所有行？

img :

我在表单转发器中使用ajax

代码 html :

   <form class=" row mb-30" action="{{ route('Classrooms.store') }}" method="POST">
                    @csrf
                    
                    <div class="card-body">
                        <div class="repeater">
                            <div data-repeater-list="List_Classes">
                                <div data-repeater-item>
                                    <div class="row">
                                        
                                        <div class="col">
                                            <label for="Name"
                                                class="mr-sm-2">اسم الفصل
                                                :</label>
                                            <input class="form-control" type="text" name="ClassName" />
                                        </div>

                                        <div class="col">
                                            <div class="form-group">
                                                <label for="exampleFormControlTextarea1">
                                                    الكلية :</label>
                                                <select class="form-control form-control-lg p-1 College" id="exampleFormControlSelect1"
                                                    name="College" required>
                                                    <option disabled selected>
                                                        الكليات....
                                                    </option>
                                                    @foreach ($Colleges as $College)
                                                        <option value="{{ $College->id }}">
                                                            {{ $College->CollageName }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="exampleFormControlTextarea1">
                                                    القسم :</label>
                                                <select class="form-control form-control-lg p-1 Section" id="exampleFormControlSelect1"
                                                    name="Section" required>
                                                    <option disabled selected>
                                                        الاقسام....
                                                    </option>
                
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label for="exampleFormControlTextarea1">
                                                    التخصص  :</label>
                                                <select class="form-control form-control-lg p-1 Specialtie" id="exampleFormControlSelect1"
                                                    name="Specialtie" required>
                                                    <option disabled selected>
                                                        التخصص الدراسي ....
                                                    </option>
                
                                                </select>
                                            </div>
                                        </div>
                                       

                                        <div class="col">
                                            <label for="Name_en"
                                                class="mr-sm-2">حذف صف
                                                :</label>
                                            <input class="btn btn-danger btn-block" data-repeater-delete
                                                type="button" value="حذف" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-20">
                                <div class="col-12">
                                    <input class="button" data-repeater-create type="button" value="أضافة صف"/>
                                </div>

                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-dismiss="modal">الرجوع</button>
                                <button type="submit"
                                    class="btn btn-success">حفظ</button>
                            </div>


                        </div>
                    </div>
                </form>

js:

<script>
    $('.College').on('change', function() {
        var Colleges = $(this).val();
        var Section = $(this).closest('div[data-repeater-item]').find('.Section');
        var Specialtie = $(this).closest('div[data-repeater-item]').find('.Specialtie');
 
        if (Colleges) {
            $.ajax({
                url: "{{ URL::to('classes') }}/" + Colleges+'/0',
                type: "GET",
                dataType: "json",
                success: function(data) {
                    console.log(data)
                    Section.empty();
                    Specialtie.empty();
                    Section.append(
                            '<option selected disabled>الاقسام الموجودة :</option>');
                    $.each(data, function(key, value) {
                        $(Section).append('<option value="' + key + '">' +
                            value + '</option>');
                    });
                    if (data.length == 0) {
                        $(Section).append(
                            '<option selected disabled>لايوجد أقسام بعد...</option>');
                    }
                },
            });
        } else {
            console.log('AJAX load did not work');
        }
    });
    $('.Section').on('change', function() {
        var Colleges = $(this).val();
        var Specialtie = $(this).closest('div[data-repeater-item]').find('.Specialtie');
      console.log(Colleges)
        if (Colleges) {
            $.ajax({
                url: "{{ URL::to('classes') }}/" + Colleges + '/1',
                type: "GET",
                dataType: "json",
                success: function(data) {
                    console.log(data)
                   
                    Specialtie.empty();
                   
                    $.each(data, function(key, value) {
                        $(Specialtie).append('<option value="' + key + '">' +
                            value + '</option>');
                    });
                    if (data.length == 0) {
                        $(Specialtie).append(
                            '<option selected disabled>لايوجد تخصصات بعد...</option>');
                    }
                },
            });
        } else {
            console.log('AJAX load did not work');
        }
    });
</script>

我尝试过循环等解决方案，但没有用

Answer 1

在这种情况下，我猜测其他行是在事件触发后创建的。尝试：

$(document).on('change','.College',function() {
   //your code
}

$(document).on('change','.Section',function() {
   //your code
}