我有一个带有依赖项下拉列表的表格。只要所选的主要选项没有任何辅助选项，并且首次加载页面时，该辅助下拉菜单都将隐藏。每当提交表单时，由于大部分时间下拉列表都保持不变，因此仅清除第一个字段，但是，由于只要主下拉列表发生更改，脚本便会工作，因此加载并不构成更改，它只是将选择/提交的选项保留在主下拉菜单中，并且即使选择的主选项确实具有辅助选项，也只会显示一个空的辅助下拉列表。我从一个教程的下拉菜单中获得了大部分JS，因为我不太熟悉它。为了更直观地理解：
这是页面首次加载时的形式
当您选择具有次要选项的选项时，将出现另一个下拉列表
选择工作站并提交后，将清除Employee＃，但其他两个应保留，但是，提交后重新加载页面时，看起来像这样，并且由于没有调试器，工作站已根据调试器清除从技术上讲。我不太关心站点清理，但更关心的是没有不应该为空的空下拉菜单。
当我查看保留在表单中的数据时，仅保留了工作区，因为只有从下拉菜单中选择另一个选项，并且希望再次看到Box Assembly选项时，依赖下拉列表才会加载，则必须单击另一个选项，然后返回到Box Assembly（例如）
我该如何解决这个问题？有没有一种方法可以强制javascript首先尝试加载，以便它检查剩余的选项是否确实具有次要选项，无论它是否已被触发？
表格
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'),
]
该html的末尾是处理相关下拉菜单的脚本
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 %}