Python 如果下拉列表为空而不显示，如何从前端进行检查？

我看到这可以通过AJAX实现，但我对它不是很熟悉，也不知道如何实现，因为我的html是有限的

我有一个表单，它有与ForeignKey相关的下拉列表。第一个下拉列表中的一些选项导致第二个没有任何选项，在这种情况下，我希望它不出现，而不必刷新页面

我的页面上有一个关于如何创建这些相关下拉列表的教程中的ajax请求，但我不知道如何创建一个请求来检查station_number是否为空，或者隐藏/取消隐藏div，或者类似的内容，我不确定可能发生什么

进入退出区域.html

{% block main %}
    <form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
        {% csrf_token %}
        <div>
            <div>
                {{ form.adp_number.help_text }}
                {{ form.adp_number }}
            </div>
            <div>
                {{ form.work_area.help_text }}
                {{ form.work_area }}
            </div>
            <div>
                {{ form.station_number.help_text }}
                {{ 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);
                }
            });
        });
     </script>
{% endblock main %}

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

站点号下拉列表选项.html

{% block main %}
    <form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
        {% csrf_token %}
        <div>
            <div>
                {{ form.adp_number.help_text }}
                {{ form.adp_number }}
            </div>
            <div>
                {{ form.work_area.help_text }}
                {{ form.work_area }}
            </div>
            <div>
                {{ form.station_number.help_text }}
                {{ 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);
                }
            });
        });
     </script>
{% endblock main %}

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

---------
{%用于站点中的站点%}
{{station.name}
{%endfor%}

如图所示，您可以按如下方式修改JS：

$（“#id_工作区”）。更改（功能（）{
var url=$（“#仓库表单”）.attr（“数据站url”）；
var workAreaId=$（this.val（）；
$.ajax({
url:url，
数据：{
“工作区”：工作区ID
},
成功：功能（数据）{
$（“#id#u station_number”）.html（数据）；
//检查选项的子元素的长度
if（$（“#id#U站#U号选项”）。长度==1）{
$（“#id_station_number”）.parent（）.hide（）//隐藏的父项您可以发布您的
操作/station_number_下拉列表\u options.html
代码吗？我想这只是进入select的
项，但这将有助于澄清这一点。@gabriel刚刚添加了它