의존적 드롭 다운이있는 양식이 있습니다. 이 보조 드롭 다운은 선택한 기본 옵션에 보조 옵션이없고 페이지가 처음로드 될 때 숨겨집니다. 양식이 제출 될 때마다 첫 번째 필드 만 지워집니다. 그러나 대부분의 드롭 다운은 동일하게 유지됩니다. 그러나 기본 드롭 다운에 변경이있을 때마다 스크립트가 작동하므로로드가 수행되므로 변경 사항을 구성하지 않고 선택 / 제출 된 옵션을 기본 드롭 다운에 유지하고 선택한 기본 옵션에 보조 옵션이 있더라도 빈 보조 드롭 다운을 표시합니다. 나는 익숙하지 않은 튜토리얼의 드롭 다운에서 대부분의 JS를 얻었습니다. 보다 시각적으로 이해하려면 :
페이지가 처음로드 될 때의 양식입니다.
보조 옵션이있는 옵션을 선택하면 다른 드롭 다운이 나타납니다
스테이션을 선택하여 제출 한 후 직원 번호는 지워지지 만 나머지 두 개는 남아 있어야하지만 제출시 페이지가 다시로드되면 다음과 같이 표시되며 스테이션이 없기 때문에 디버거에 따라 스테이션이 지워졌습니다. 기술적으로. 역 정리에 대해서는 신경 쓰지 않지만 빈 드롭 다운이 없어서는 안됩니다.
그리고 양식에 남아있는 데이터를 볼 때 드롭 다운에서 다른 옵션을 선택할 때까지 박스 드롭 옵션을 다시 볼 수 있기를 원할 때 종속 드롭 다운이로드되지 않기 때문에 작업 영역 만 유지되었습니다. , 다른 옵션을 클릭 한 다음 박스 어셈블리로 돌아 가야합니다 (예 :
이 문제를 어떻게 해결할 수 있습니까? 남아있는 옵션이 트리거되었는지 여부에 관계없이 남아있는 옵션에 보조 옵션이 있는지 확인하도록 자바 스크립트를 먼저로드하려고 시도하는 방법이 있습니까?
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'),
]이 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 %}