依存するドロップダウンのあるフォームがあります。このセカンダリドロップダウンは、選択されたプライマリオプションにセカンダリオプションがない場合、およびページが最初に読み込まれたときに非表示になります。フォームが送信されると、最初のフィールドのみがクリアされます。これは、ほとんどの場合ドロップダウンが同じであるためです。ただし、スクリプトはプライマリドロップダウンに変更があった場合は常に機能します。変更を構成するのではなく、選択/送信されたオプションをプライマリドロップダウンに保持し、選択されたプライマリオプションにセカンダリオプションがある場合でも、空のセカンダリドロップダウンを表示します。私はJSのほとんどを、チュートリアルのドロップダウンからよく知りません。より視覚的に理解するために：
これは、ページが最初にロードされたときのフォームです
セカンダリオプションがあるオプションを選択すると、もう1つのドロップダウンが表示されます
ステーションを選択して送信すると、従業員番号はクリアされますが、他の2つは残っているはずですが、送信時にページがリロードされると、次のようになり、ステーションがないため、ステーションはステーションによってクリアされました技術的に。駅の整理についてはあまり気にしていませんが、空にしてはいけない空のドロップダウンがないことのほうが重要です。
フォームに残ったデータを見ると、ドロップダウンから別のオプションを選択するまで依存ドロップダウンが読み込まれず、ボックスアセンブリオプションを再び表示できるようにしたい場合は、作業領域のみが残りました。 、別のオプションをクリックしてから、（たとえば）ボックスアセンブリに戻る必要があります。
この問題を解決するにはどうすればよいですか？残されたオプションがトリガーされているかどうかに関係なく、セカンダリオプションがあるかどうかをチェックするように、JavaScriptが最初にロードするように強制する方法はありますか？
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 %}