Javascript 如何在页面加载时“加载”相关下拉列表？

我有一个带有依赖下拉列表的表单。每当选定的主选项没有任何辅助选项时，以及当页面首次加载时，此辅助下拉列表将隐藏。无论何时提交表单，只有第一个字段会被清除，因为大多数时候下拉列表都保持不变，但是，因为只要主下拉列表中有更改，脚本就会工作，因为加载不会构成更改，它只会保留主下拉列表中的selected/submitted选项，并且将只显示一个空的辅助下拉列表，即使选定的主选项确实具有辅助选项。我从教程的下拉列表中获得了大部分JS，因为我对它不是很熟悉。要获得更直观的理解：

这是页面首次加载时的表单

选择具有辅助选项的选项时，将显示另一个下拉列表

选择一个站点并提交后，员工将清除，但其他两个站点应该保留，但是，当页面在提交时重新加载时，看起来是这样的，并且该站点已根据调试器清除，因为从技术上讲没有。我不太关心车站的清理，但更关心的是不要有一个不应该为空的空下拉列表

当我查看表单中保留的数据时，只有工作区保留了下来，因为在您从下拉列表中选择另一个选项之前，依赖下拉列表不会加载，如果您想再次看到长方体部件选项，您必须单击另一个选项，然后返回长方体部件，例如

如何解决此问题？有没有一种方法可以强制javascript首先尝试加载，这样它就可以检查剩下的选项是否有辅助选项，不管它是否被触发

forms.py

views.py

url.py

在这个html的末尾是处理依赖下拉列表的脚本

输入\退出\区域.html

电台号码下拉列表选项.html

我看到您有$document.readyloadStations

但问题是在loadStations中，您需要执行var workAreaId=$this.val

这将是一个文档，$document.val是一个空字符串

在装载站中对选择器进行硬编码：

//var workAreaId=$this.val； var workAreaId=$id\u work\u area.val； 或者从元素触发更改：

$id\u工作区。更换装货站； //$document.readyloadStations； $id\u工作区域。更改；

---

第一个选项不起作用，它不会加载任何内容，但第二个选项起作用，谢谢！我会在一个小时内奖励赏金，它还不允许我

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

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

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

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

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