Bağımlı bir açılır liste içeren bir form var. Bu ikincil açılır menü, seçilen birincil seçeneğin ikincil seçenekleri olmadığında ve sayfa ilk yüklendiğinde gizlenir. Form gönderildiğinde, yalnızca ilk alan temizlenir, çünkü çoğu zaman açılır listeler aynı kalır, çünkü komut dosyası, birincil açılır menüde bir değişiklik olduğunda çalışır; bir değişiklik oluşturmazsa, yalnızca seçilen / gönderilen seçeneği birincil açılır menüde tutar ve seçilen birincil seçenekte ikincil seçenekler olsa bile boş bir ikincil açılır liste görüntülenir. JS'nin çoğunu bir öğreticiden açılır menüden aldım, çünkü çok tanıdık değilim. Daha görsel bir anlayış için:
Sayfa ilk yüklendiğinde bu form
İkincil seçenekleri olan bir seçenek seçtiğinizde, diğer açılır menü görünür
Bir İstasyon seçtikten ve gönderdikten sonra Çalışan # temizlenir, ancak diğer ikisinin kalması gerekir, ancak sayfa gönderildikten sonra yeniden yüklendiğinde, şuna benzer ve istasyon, hata ayıklayıcıya göre temizlendi. teknik olarak. İstasyonun temizlenmesi hakkında çok fazla umursamıyorum, ancak boş olmaması gereken boş bir açılır menüye sahip olmamakla ilgili daha fazla şey.
Formda kalan verilere baktığımda, yalnızca çalışma alanı kaldı, çünkü bağımlı açılır menü, açılır menüden başka bir seçenek seçinceye kadar yüklenmiyor ve Kutu Montajı seçeneklerini tekrar görmek istiyorsanız , başka bir seçeneği tıklamanız ve ardından Kutu Montajına geri dönmeniz gerekir (örneğin)
Bu sorunu nasıl düzeltebilirim? Javascript'i önce yüklenmeye zorlamanın bir yolu var mı, böylece kalan seçeneğin tetiklenip tetiklenmediği ikincil seçeneklere sahip olup olmadığını kontrol ediyor mu?
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'),
]Bu html'nin sonunda bağımlı açılır listeyi işleyen komut dosyası bulunur
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 %}