Bagaimana cara "memuat" drop-down tergantung pada pemuatan halaman?

Saya memiliki formulir dengan drop-down dependen. Drop-down sekunder ini disembunyikan setiap kali opsi utama yang dipilih tidak memiliki opsi sekunder, dan saat halaman dimuat pertama kali. Setiap kali formulir dikirimkan, hanya bidang pertama yang dihapus, karena sebagian besar waktu drop-down tetap sama, namun, karena skrip bekerja setiap kali ada perubahan drop-down primer, karena beban pada bukan merupakan perubahan, itu hanya membuat opsi yang dipilih / dikirim pada drop-down primer, dan hanya akan menampilkan drop-down sekunder yang kosong, bahkan ketika opsi primer yang dipilih memang memiliki opsi sekunder. Saya mendapatkan sebagian besar JS dari drop-down dari tutorial, karena saya tidak terlalu terbiasa dengannya. Untuk pemahaman yang lebih visual:

Ini adalah formulir ketika halaman pertama kali dimuat

Ketika Anda memilih opsi yang memiliki opsi sekunder, dropdown lainnya muncul

Setelah Anda memilih Stasiun dan mengirimkan, # Karyawan dihapus, tetapi dua lainnya seharusnya tetap, namun, ketika halaman dimuat kembali setelah diajukan, sepertinya ini, dan stasiun telah dihapus sesuai dengan debugger karena tidak ada secara teknis. Saya tidak terlalu peduli dengan pembukaan stasiun, tetapi lebih banyak tentang tidak memiliki drop-down kosong yang seharusnya tidak kosong.

Dan ketika saya melihat data yang tetap dalam formulir, hanya area kerja yang tetap, karena dropdown dependen tidak memuat sampai Anda memilih opsi lain dari drop down, dan jika Anda ingin dapat melihat opsi Box Assembly lagi , Anda harus mengklik opsi lain dan kemudian kembali ke Box Assembly (misalnya)

Bagaimana saya bisa memperbaiki masalah ini? Apakah ada cara untuk memaksa javascript mencoba memuat terlebih dahulu sehingga memeriksa apakah opsi yang tersisa memang memiliki opsi sekunder, apakah telah dipicu atau tidak?

forms.py

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number')


    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['station_number'].queryset = Station.objects.none()

        if 'work_area' in self.data:
            try:
                work_area_id = int(self.data.get('work_area'))
                self.fields['station_number'].queryset = Station.objects.filter(work_area_id=work_area_id).order_by('name')
            except (ValueError, TypeError):
                pass
        elif self.instance.pk:
            self.fields['station_number'].queryset = self.instance.work_area.stations.order_by('name')

views.py

def enter_exit_area(request):
    enter_without_exit = None
    exit_without_enter = None

    if request.method == 'POST':
        form = WarehouseForm(request.POST)
        if form.is_valid():
            emp_num = form.cleaned_data['employee_number']
            area = form.cleaned_data['work_area']
            station = form.cleaned_data['station_number']

            # Submission logic
                form = WarehouseForm(initial={'employee_number': '', 'work_area': area, 'station_number': station})

    else:
        form = WarehouseForm()
    return render(request, "operations/enter_exit_area.html", {
        'form': form,
        'enter_without_exit': enter_without_exit,
        'exit_without_enter': exit_without_enter,
    })

urls.py

urlpatterns = [
    url(r'enter-exit-area/$', views.enter_exit_area, name='enter_exit_area'),

    path('ajax/load-stations/', views.load_stations, name='ajax_load_stations'),
]

Di akhir html ini adalah skrip yang menangani drop-down dependen

enter_exit_area.html

{% extends "operations/base.html" %}
{% block main %}
    <form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
        {% csrf_token %}

        <div>
            <div>
                <label>Employee #</label>
                {{ form.employee_number }}
            </div>

            <div>
                <label>Work Area</label>
                {{ form.work_area }}
            </div>
            <div class="col-xs-8" id="my-hidden-div">
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>
    </form>

    <script>
        function loadStations() {
            var url = $("#warehouseForm").attr("data-stations-url");
            var workAreaId = $(this).val();
            var $stationNumberField = $("#{{ form.station_number.id_for_label }}");

            $.ajax({
                url: url,
                data: {
                    'work_area': workAreaId
                },
                success: function (data) {
                    $("#my-hidden-div").show(); // show it
                    $stationNumberField.html(data);
                    // Check the length of the options child elements of the select
                    if ($stationNumberField.find("option").length === 1) {
                        $stationNumberField.parent().hide(); // Hide parent of the select node
                    } else {
                        // If any option, ensure the select is shown
                        $stationNumberField.parent().show();
                    }
                }
            });
        }
        $("#id_work_area").change(loadStations);
        $(document).ready(loadStations);
     </script>
{% endblock main %}

station_number_dropdown_options.html

<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}

Saya melihat bahwa Anda punya $(document).ready(loadStations);.

Tetapi masalahnya adalah bahwa di loadStations, Anda lakukan var workAreaId = $(this).val();.

thisakan menjadi document, dan $(document).val()merupakan string kosong.

Entah hardcode pemilih dalam loadStations:

// var workAreaId = $(this).val();
var workAreaId = $("#id_work_area").val();

Atau picu perubahan dari elemen sebagai gantinya:

$("#id_work_area").change(loadStations);
// $(document).ready(loadStations);
$("#id_work_area").change();