Tôi có một hình thức với một thả xuống phụ thuộc. Trình đơn thả xuống thứ cấp này bị ẩn bất cứ khi nào tùy chọn chính được chọn không có bất kỳ tùy chọn phụ nào và khi trang tải lần đầu tiên. Tuy nhiên, bất cứ khi nào biểu mẫu được gửi, chỉ có trường đầu tiên bị xóa, vì hầu hết thời gian thả xuống vẫn giữ nguyên, vì tập lệnh hoạt động bất cứ khi nào có thay đổi trong trình đơn thả xuống chính, vì tải vào không cấu thành thay đổi, nó chỉ giữ tùy chọn được chọn / gửi trên trình đơn thả xuống chính và sẽ chỉ hiển thị một thả xuống thứ cấp trống, ngay cả khi tùy chọn chính được chọn có tùy chọn phụ. Tôi đã nhận được hầu hết các JS từ trình đơn thả xuống từ một hướng dẫn, vì tôi không quen lắm với nó. Để hiểu rõ hơn về thị giác:
Đây là hình thức khi trang tải lần đầu tiên
Khi bạn chọn một tùy chọn có tùy chọn phụ, danh sách thả xuống khác sẽ xuất hiện
Sau khi bạn chọn một Trạm và gửi, Nhân viên # sẽ xóa, nhưng hai cái còn lại được cho là vẫn còn, tuy nhiên, khi trang tải lại khi gửi, nó trông như thế này và trạm đã bị xóa theo trình gỡ lỗi vì không có về mặt kỹ thuật. Tôi không quan tâm lắm đến việc dọn dẹp nhà ga, nhưng nhiều hơn về việc không có một trình đơn thả xuống không nên trống.
Và khi tôi xem dữ liệu vẫn còn trong biểu mẫu, chỉ có khu vực làm việc ở lại, vì danh sách phụ thuộc không tải cho đến khi bạn chọn tùy chọn khác từ trình đơn thả xuống và nếu bạn muốn có thể thấy lại các tùy chọn Lắp ráp hộp , bạn phải nhấp vào tùy chọn khác và sau đó quay lại Box hội (ví dụ)
Làm thế nào tôi có thể khắc phục vấn đề này? Có cách nào để buộc javascript thử tải trước để nó kiểm tra xem tùy chọn còn lại có các tùy chọn phụ hay không, liệu nó đã được kích hoạt hay chưa?
biểu mẫ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')lượt xem
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,
})url
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'),
]Ở cuối html này là tập lệnh xử lý trình đơn thả xuống phụ thuộc
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 %}trạm_number_dropdown_options.html
<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}