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