Jak „załadować” zależne menu rozwijane po załadowaniu strony?

Mam formularz z zależnym menu rozwijanym. To dodatkowe menu rozwijane jest ukryte za każdym razem, gdy wybrana podstawowa opcja nie ma żadnych dodatkowych opcji i gdy strona jest ładowana po raz pierwszy. Za każdym razem, gdy formularz jest przesyłany, usuwane jest tylko pierwsze pole, ponieważ przez większość czasu listy rozwijane pozostają takie same, ponieważ skrypt działa zawsze, gdy następuje zmiana w głównym menu rozwijanym, ponieważ obciążenie nie stanowi zmiany, po prostu zachowuje wybraną / przesłaną opcję w głównym menu rozwijanym i wyświetla tylko puste menu rozwijane wtórne, nawet jeśli wybrana opcja główna ma opcje dodatkowe. Większość JS otrzymałem z listy rozwijanej z samouczka, ponieważ nie jestem zbyt dobrze zaznajomiony z tym. Dla lepszego wizualnego zrozumienia:

Jest to formularz przy pierwszym ładowaniu strony

Po wybraniu opcji z opcjami dodatkowymi pojawia się druga lista rozwijana

Po wybraniu stacji i przesłaniu numer pracownika zostaje wyczyszczony, ale pozostałe dwa powinny pozostać, jednak gdy strona zostanie ponownie załadowana po przesłaniu, wygląda to tak, a stacja została wyczyszczona zgodnie z debuggerem, ponieważ nie ma żadnych technicznie. Nie dbam tak bardzo o czyszczenie stacji, ale bardziej o brak pustej listy rozwijanej, która nie powinna być pusta.

A kiedy patrzę na dane, które pozostały w formularzu, pozostał tylko obszar roboczy, ponieważ zależne menu rozwijane nie ładuje się, dopóki nie wybierzesz innej opcji z listy rozwijanej, a jeśli chcesz ponownie zobaczyć opcje złożenia skrzynki , musisz kliknąć inną opcję, a następnie wrócić do zestawu skrzynek (na przykład)

Jak mogę rozwiązać ten problem? Czy istnieje sposób, aby zmusić javascript do próby załadowania w pierwszej kolejności, aby sprawdził, czy pozostała opcja ma opcje dodatkowe, czy została uruchomiona, czy nie?

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'),
]

Na końcu tego html znajduje się skrypt, który obsługuje zależne menu rozwijane

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

javascript python html django Mariana Gomez-Kusnecov
źródło

Jak „załadować” zależne menu rozwijane po załadowaniu strony?

Odpowiedzi: