Ho un modulo con un menu a discesa dipendente. Questo menu a discesa secondario viene nascosto ogni volta che l'opzione primaria selezionata non ha opzioni secondarie e al primo caricamento della pagina. Ogni volta che viene inviato il modulo, viene cancellato solo il primo campo, poiché la maggior parte delle volte i menu a discesa rimangono gli stessi, poiché lo script funziona ogni volta che si verifica una modifica nel menu a discesa principale, poiché il caricamento su non costituisce una modifica, mantiene semplicemente l'opzione selezionata / inviata sul menu a discesa principale e visualizzerà un menu a discesa secondario vuoto, anche quando l'opzione primaria selezionata ha opzioni secondarie. Ho ottenuto la maggior parte del JS dal menu a discesa da un tutorial, poiché non ne ho molta familiarità. Per una comprensione più visiva:
Questo è il modulo al primo caricamento della pagina
Quando si seleziona un'opzione con opzioni secondarie, viene visualizzato l'altro menu a discesa
Dopo aver selezionato una stazione e inviato, il dipendente # cancella, ma gli altri due dovrebbero rimanere, tuttavia, quando la pagina viene ricaricata al momento dell'invio, è simile a questa e la stazione è stata cancellata in base al debugger poiché non ce ne sono tecnicamente. Non mi interessa molto della pulizia della stazione, ma piuttosto di non avere un menu a discesa vuoto che non dovrebbe essere vuoto.
E quando guardo i dati che sono rimasti nel modulo, è rimasta solo l'area di lavoro, perché il menu a discesa dipendente non viene caricato fino a quando non si seleziona un'altra opzione dal menu a discesa e se si desidera poter vedere di nuovo le opzioni Assemblaggio scatola , dovresti fare clic su un'altra opzione e poi tornare a Box Assembly (ad esempio)
Come posso risolvere questo problema? C'è un modo per forzare il javascript a tentare di caricare prima in modo che controlli se l'opzione rimasta ha le opzioni secondarie, se è stata attivata o no?
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'),
]
Alla fine di questo html è lo script che gestisce il menu a discesa dipendente
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 %}