如何通过前端判断依赖型下拉框为空并隐藏？AJAX实现求助

我来帮你搞定这个需求！其实你已经搭好了依赖下拉的AJAX基础，只需要加几行判断逻辑，就能实现当station_number没有可选选项时自动隐藏它的容器。

步骤1：给station_number的容器添加唯一ID #

首先修改你的HTML模板，给包含station_number的<div>加上ID，方便我们用jQuery精准控制它：

<div id="station-number-container">
  {{ form.station_number.help_text }} {{ form.station_number }}
</div>

步骤2：修改AJAX的success回调，添加显示/隐藏逻辑 #

在AJAX请求成功更新完station_number的选项后，我们检查下拉框里的选项数量——如果只有默认的---------（也就是选项总数≤1），就隐藏容器；否则显示它。

修改后的JS代码如下：

$("#id_work_area").change(function () {
  var url = $("#warehouseForm").attr("data-stations-url");
  var workAreaId = $(this).val();
  // 提前获取容器和下拉框元素，避免重复查找
  var stationContainer = $("#station-number-container");
  var stationDropdown = $("#id_station_number");

  $.ajax({
    url: url,
    data: { 'work_area': workAreaId },
    success: function (data) {
      stationDropdown.html(data);
      // 判断是否存在实际可选的station（排除默认空选项）
      if (stationDropdown.find("option").length <= 1) {
        stationContainer.hide();
      } else {
        stationContainer.show();
      }
    }
  });
});

步骤3：可选：页面初始化时自动检查状态 #

如果页面加载时，默认选中的work_area本来就没有对应station，我们可以在页面加载完成后自动执行一次判断，避免初始状态下的显示问题：

// 页面加载完成后初始化显示状态
$(document).ready(function() {
  var stationContainer = $("#station-number-container");
  var stationDropdown = $("#id_station_number");
  
  if (stationDropdown.find("option").length <= 1) {
    stationContainer.hide();
  }
});

逻辑说明 #

• 你的station_number_dropdown_options.html默认会返回一个空选项<option value="">---------</option>，所以当选项总数≤1时，说明没有实际可用的station。
• 用jQuery的hide()和show()方法实现无刷新的动态切换，完全符合你的需求。

这样修改后，当你选择没有对应station的work_area时，station_number下拉框会自动隐藏；选择有对应station的选项时，又会重新显示出来。

内容的提问来源于stack exchange，提问作者Mariana Gomez-Kusnecov