Question

我有一个脚本，该脚本加载了一个依赖的下拉选项。我添加了一个部分，只要没有可用的选项，相关的下拉菜单就会隐藏。主下拉菜单在提交后会保留最新的提交数据，但是当您提交在第二下拉菜单中没有选项的选项并且页面重新加载时，第一下拉菜单中没有第二选项的选项选项显示，还显示辅助下拉菜单，当您单击它时，它只是空的，因为检查是否应隐藏它的逻辑仅检查主要下拉菜单中的更改。如何在结尾处更改此脚本，以便在开头和发生更改时都加载？

enter_exit_area.html

{% extends "base.html" %}

{% load core_tags staticfiles %}

{% 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 id="my-hidden-div">
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>
                <button type="submit" name="leave_area" value="Leave">Exit Area</button>
            </div>
        </div>
    </form>

    <script>
        $("#id_work_area").change(function () {
            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();
                    }
                }
            });
        });
     </script>

{% endblock main %}

更新：

进行了更改，现在脚本看起来像这样，但是，我收到此错误，阻止了它的加载，可能是什么原因造成的？

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());

jquery.js:4 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at m.fn.init.val (jquery.js:4)
    at loadStations ((index):124)
    at (index):145

Answer 1

尝试将功能代码放入单独的功能中，所以...

function someFunction() {
        var url = $("#... 
}

然后添加两个事件侦听器...

$("#id_work_area").change(someFunction);
$(document).ready(someFunction);

如何修改此脚本，使其在页面首次加载并进行更改时起作用？

1 个答案: