วิธีการ "โหลด" ขึ้นอยู่กับเลื่อนลงเมื่อโหลดหน้า?

ฉันมีแบบฟอร์มที่มีรายการแบบหล่นลง เมนูแบบเลื่อนลงที่สองนี้จะถูกซ่อนไว้เมื่อใดก็ตามที่ตัวเลือกหลักที่เลือกไม่มีตัวเลือกรองและเมื่อหน้าโหลดครั้งแรก เมื่อใดก็ตามที่มีการส่งแบบฟอร์มจะมีการล้างฟิลด์แรกเท่านั้นเนื่องจากส่วนใหญ่เวลาที่ดร็อปดาวน์ยังคงเหมือนเดิมอย่างไรก็ตามเนื่องจากสคริปต์ทำงานเมื่อใดก็ตามที่มีการเปลี่ยนแปลงในดรอปดาวน์หลักเนื่องจากโหลดตาม ไม่ถือว่าเป็นการเปลี่ยนแปลงมันเพียงเก็บตัวเลือกที่ถูกเลือก / ส่งในดรอปดาวน์หลักและจะแสดงดรอปดาวน์รองที่ว่างเปล่าแม้ว่าตัวเลือกหลักที่เลือกจะมีตัวเลือกรอง ฉันได้รับส่วนใหญ่ของ JS จากเมนูแบบเลื่อนลงเนื่องจากฉันไม่คุ้นเคยกับมันมาก เพื่อความเข้าใจที่ชัดเจนยิ่งขึ้น:

นี่คือฟอร์มเมื่อเพจโหลดครั้งแรก

เมื่อคุณเลือกตัวเลือกที่มีตัวเลือกรองตัวเลือกอื่น ๆ จะปรากฏขึ้น

หลังจากที่คุณเลือกสถานีและส่งแล้ว Employee # จะล้างข้อมูล แต่อีกสองควรจะยังคงอยู่อย่างไรก็ตามเมื่อหน้าโหลดใหม่เมื่อมีการส่งจะมีลักษณะเช่นนี้และสถานีถูกล้างข้อมูลตามตัวดีบักเนื่องจากไม่มี ในทางเทคนิค ฉันไม่สนใจเกี่ยวกับการล้างสถานีมากนัก แต่เรื่องการไม่มีดร็อปดาวน์ว่างที่ไม่ควรว่างเปล่า

และเมื่อฉันดูข้อมูลที่ยังคงอยู่ในแบบฟอร์มมีเพียงพื้นที่ทำงานอยู่เนื่องจากดรอปดาวน์ที่ขึ้นต่อกันไม่โหลดจนกว่าคุณจะเลือกตัวเลือกอื่นจากดรอปดาวน์และถ้าคุณต้องการที่จะเห็นตัวเลือก Box Assembly อีกครั้ง คุณต้องคลิกตัวเลือกอื่นแล้วกลับไปที่ Box Assembly (ตัวอย่าง)

ฉันจะแก้ไขปัญหานี้ได้อย่างไร มีวิธีบังคับให้ 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 %}

$(document).ready(loadStations);ผมเห็นว่าคุณมี

แต่ปัญหาก็คือในการที่คุณทำloadStationsvar workAreaId = $(this).val();

thisจะเป็นdocumentและ$(document).val()เป็นสตริงว่าง

ตัวเลือกฮาร์ดโค้ดในloadStations:

// var workAreaId = $(this).val();
var workAreaId = $("#id_work_area").val();

หรือเรียกการเปลี่ยนแปลงจากองค์ประกอบแทน:

$("#id_work_area").change(loadStations);
// $(document).ready(loadStations);
$("#id_work_area").change();