Html 如何修改AJAX请求，以便在加载页面时隐藏空的依赖下拉列表？

我有一个表单，它有一个依赖下拉列表。当前，当页面加载时，它显示主下拉列表和从属下拉列表，当您选择没有“站点”的“工作区”时，站点下拉列表将从页面中消失

我试图实现的是在页面第一次加载时隐藏Station下拉列表，并且只有在选择了具有Stations的工作区域时才显示Station下拉列表。我如何修改AJAX请求（或者html标记，不确定必须在何处进行更改），以便从一开始就隐藏它

进入退出区域.html

{% extends "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>
                <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">Leave Area</button>
            </div>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $("#id_work_area").change(function () {
            var url = $("#warehouseForm").attr("data-stations-url");
            var workAreaId = $(this).val();

            $.ajax({
                url: url,
                data: {
                    'work_area': workAreaId
                },
                success: function (data) {
                    $("#id_station_number").html(data);
                    // Check the length of the options child elements of the select
                    if ($("#id_station_number option").length == 1) {
                        $("#id_station_number").parent().hide(); // Hide parent of the select node
                    } else {
                        // If any option, ensure the select is shown
                        $("#id_station_number").parent().show();
                    }
                }
            });
        });
     </script>
{% endblock main %}

<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}

---

最初隐藏你的div

        <div id="my-hidden-div" style="display:none">
            <label>Station</label>
            {{ form.station_number }}
        </div>

或者制定一个css规则

#id#u站(编号{显示：无}

那么就这样在成功中表现出来吧

$("#id_station_number").show();

---

最初隐藏你的div

        <div id="my-hidden-div" style="display:none">
            <label>Station</label>
            {{ form.station_number }}
        </div>

或者制定一个css规则

#id#u站(编号{显示：无}

那么就这样在成功中表现出来吧

$("#id_station_number").show();