如何在页面加载时“加载”依赖下拉？

Posted 2023-02-23

【中文标题】如何在页面加载时“加载”依赖下拉？

【英文标题】：How to "load" dependent drop down upon page load?

【发布时间】：2020-03-29 16:07:40

【问题描述】：

我有一个带有相关下拉列表的表单。只要选择的主要选项没有任何次要选项，并且页面首次加载时，此次要下拉菜单就会隐藏。每当提交表单时，只有第一个字段被清除，因为大多数时候下拉菜单保持不变，但是，只要主下拉菜单发生变化，脚本就会工作，因为加载确实不构成更改，它只是将选择/提交的选项保留在主要下拉列表中，并且只会显示一个空的辅助下拉列表，即使选择的主要选项确实有辅助选项。我从教程的下拉列表中获得了大部分 JS，因为我对它不是很熟悉。为了更直观的理解：

这是页面首次加载时的表单

当您选择具有辅助选项的选项时，会出现另一个下拉菜单

选择一个Station并提交后，Employee#被清除，但其他两个应该保留，但是，当页面在提交时重新加载时，它看起来像这样，并且根据调试器已经清除了station技术上没有。我不太关心车站清理，但更关心的是没有一个不应该为空的空下拉菜单。

当我查看表单中保留的数据时，只有工作区保留了，因为在您从下拉列表中选择另一个选项之前，依赖下拉列表不会加载，并且如果您希望能够看到框再次组装选项，您必须单击另一个选项，然后返回到 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 %

【参考方案1】：

我看到你有$(document).ready(loadStations);。

但问题是，在loadStations 中，您使用的是var 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();

【讨论】：

第一个选项不起作用（它不会加载任何内容），但第二个选项起作用了，谢谢！我会在一个小时内奖励赏金，它还不让我这样做