如何用jQuery在页面加载时隐藏多下拉框？无HTML直接访问权限

没问题，这种级联下拉逐步显示的需求太常见了，咱们用CSS初始隐藏+JavaScript监听选择事件就能搞定。我先基于你提供的代码片段补全结构，再给你完整的实现方案：

1. 调整HTML结构 #

给每个下拉框添加唯一标识，同时给需要初始隐藏的下拉框加上hidden类：

<div class="custom-field-container form-row">
  <!-- 省份下拉框 - 初始可见 -->
  <div class="form-control">
    <label>选择省份</label>
    <select id="province-select" class="form-select">
      <option value="">请选择省份</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <!-- 其他省份选项 -->
    </select>
  </div>

  <!-- 城市下拉框 - 初始隐藏 -->
  <div class="form-control hidden">
    <label>选择城市</label>
    <select id="city-select" class="form-select">
      <option value="">请选择城市</option>
      <!-- 选项可以提前写死或后续通过JS动态加载 -->
    </select>
  </div>

  <!-- 区县下拉框 - 初始隐藏 -->
  <div class="form-control hidden">
    <label>选择区县</label>
    <select id="district-select" class="form-select">
      <option value="">请选择区县</option>
      <!-- 选项可以提前写死或后续通过JS动态加载 -->
    </select>
  </div>
</div>

2. 添加CSS样式 #

用hidden类强制控制初始隐藏状态，避免被表单原有样式覆盖：

.hidden {
  display: none !important;
}

3. 编写JavaScript联动逻辑 #

监听每一级下拉框的选择事件，根据选择结果显示/隐藏下一级，同时支持动态加载对应选项（如果你的选项是固定的，也可以跳过动态加载部分，只控制显示隐藏）：

// 获取所有下拉框元素
const provinceSelect = document.getElementById('province-select');
const citySelect = document.getElementById('city-select');
const districtSelect = document.getElementById('district-select');

// 监听省份选择事件
provinceSelect.addEventListener('change', function() {
  if (this.value !== '') {
    // 选择了有效省份，显示城市下拉框
    citySelect.parentElement.classList.remove('hidden');
    // 示例：根据省份动态加载城市选项（你可以换成接口请求逻辑）
    const cityMap = {
      beijing: [{value: 'chaoyang', text: '朝阳区'}, {value: 'haidian', text: '海淀区'}],
      shanghai: [{value: 'pudong', text: '浦东新区'}, {value: 'xuhui', text: '徐汇区'}]
    };
    // 清空城市下拉框原有选项
    citySelect.innerHTML = '<option value="">请选择城市</option>';
    // 添加对应省份的城市选项
    cityMap[this.value].forEach(city => {
      const option = document.createElement('option');
      option.value = city.value;
      option.textContent = city.text;
      citySelect.appendChild(option);
    });
  } else {
    // 选回默认值，隐藏后续所有下拉框并重置状态
    citySelect.parentElement.classList.add('hidden');
    districtSelect.parentElement.classList.add('hidden');
    citySelect.value = '';
    districtSelect.value = '';
  }
});

// 监听城市选择事件
citySelect.addEventListener('change', function() {
  if (this.value !== '') {
    // 选择了有效城市，显示区县下拉框
    districtSelect.parentElement.classList.remove('hidden');
    // 示例：根据城市动态加载区县选项
    const districtMap = {
      chaoyang: [{value: 'sanlitun', text: '三里屯街道'}, {value: 'guomao', text: '国贸街道'}],
      haidian: [{value: 'wudaokou', text: '五道口街道'}, {value: 'zhongguancun', text: '中关村街道'}]
    };
    // 清空区县下拉框原有选项
    districtSelect.innerHTML = '<option value="">请选择区县</option>';
    // 添加对应城市的区县选项
    districtMap[this.value].forEach(district => {
      const option = document.createElement('option');
      option.value = district.value;
      option.textContent = district.text;
      districtSelect.appendChild(option);
    });
  } else {
    // 选回默认值，隐藏区县下拉框并重置状态
    districtSelect.parentElement.classList.add('hidden');
    districtSelect.value = '';
  }
});

关键细节说明 #

• 初始隐藏：通过CSS的hidden类确保除省份外的下拉框一开始完全不可见，避免页面加载时的闪烁问题。
• 联动控制：每一级选择后才解锁下一级，同时支持动态加载对应选项（如果你的选项是固定的，直接写在HTML里，只保留显示隐藏逻辑即可）。
• 重置处理：当用户选回默认选项时，自动隐藏后续所有下拉框并重置选择状态，避免残留无效选项。

这样就能完美实现你要的「仅初始显示省份下拉，其余随选择逐步显示」的效果了。

内容的提问来源于stack exchange，提问作者SorryEh