如何在用户选择下拉框选项时启用另一下拉框的指定选项？

嘿，我来帮你搞定这个联动下拉框的需求！你说得没错，jQuery确实能让这类DOM操作更简洁高效，不过纯JavaScript现在的API也很顺手，我两种方案都给你整理出来，你可以按需选择～

先准备基础HTML结构 #

首先我们把两个下拉框的结构补全，给活动选项加上data-province属性，用来关联对应的省份：

<!-- 省份下拉框 -->
<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
  <option value="">----Select Province----</option>
  <option value="ON">Ontario</option>
  <option value="QC">Quebec</option>
  <option value="BC">British Columbia</option>
</select>

<!-- 活动下拉框 -->
<select name="select_event_dropdown" id="select_event_dropdown" size="1" style="width: 183px;">
  <option value="">----Select Event----</option>
  <!-- 安大略省的活动 -->
  <option value="toronto-fest" data-province="ON">Toronto Summer Festival</option>
  <option value="ottawa-expo" data-province="ON">Ottawa Tech Expo</option>
  <!-- 魁北克省的活动 -->
  <option value="montreal-jazz" data-province="QC">Montreal Jazz Festival</option>
  <!-- 不列颠哥伦比亚省的活动 -->
  <option value="vancouver-marathon" data-province="BC">Vancouver Marathon</option>
</select>

方案一：jQuery实现（简洁高效） #

jQuery的优势就是用更少的代码完成DOM操作，核心思路是监听省份下拉框的change事件，然后动态启用/禁用活动下拉框的选项：

$(document).ready(function() {
  // 初始化：默认禁用所有非默认活动选项
  $('#select_event_dropdown option:not([value=""])').prop('disabled', true);

  // 监听省份下拉框的变化
  $('#select_province_dropdown').on('change', function() {
    const selectedProvince = $(this).val();
    const eventDropdown = $('#select_event_dropdown');

    // 先禁用所有非默认活动选项
    eventDropdown.find('option:not([value=""])').prop('disabled', true);

    // 如果选中了有效省份，启用对应活动选项
    if (selectedProvince) {
      eventDropdown.find(`option[data-province="${selectedProvince}"]`).prop('disabled', false);
      // 可选：自动选中第一个可用的活动选项
      eventDropdown.val(eventDropdown.find(`option[data-province="${selectedProvince}"]`).first().val());
    } else {
      // 如果选回默认选项，重置活动下拉框
      eventDropdown.val('');
    }
  });
});

代码说明： #

• $(document).ready()确保DOM加载完成后再执行代码
• 初始化时禁用所有非默认活动选项，避免用户一开始就能选无关选项
• 选中省份后，先批量禁用所有活动选项，再启用对应省份的选项，逻辑清晰
• 可选的自动选中第一个可用活动，能提升用户体验

方案二：纯JavaScript实现（无依赖） #

如果不想引入jQuery，纯JS也能轻松实现，逻辑和jQuery一致，只是用原生API：

document.addEventListener('DOMContentLoaded', function() {
  const provinceDropdown = document.getElementById('select_province_dropdown');
  const eventDropdown = document.getElementById('select_event_dropdown');
  const eventOptions = eventDropdown.querySelectorAll('option:not([value=""])');

  // 初始化：禁用所有非默认活动选项
  eventOptions.forEach(option => option.disabled = true);

  // 监听省份下拉框变化
  provinceDropdown.addEventListener('change', function() {
    const selectedProvince = this.value;

    // 先禁用所有活动选项
    eventOptions.forEach(option => option.disabled = true);

    if (selectedProvince) {
      // 启用对应省份的活动选项
      const matchingOptions = eventDropdown.querySelectorAll(`option[data-province="${selectedProvince}"]`);
      matchingOptions.forEach(option => option.disabled = false);
      // 可选：自动选中第一个可用选项
      eventDropdown.value = matchingOptions[0].value;
    } else {
      // 重置活动下拉框
      eventDropdown.value = '';
    }
  });
});

代码说明： #

• DOMContentLoaded替代jQuery的ready，确保DOM加载完成
• 用querySelectorAll筛选元素，和jQuery的选择器语法类似
• 用forEach遍历选项，实现批量操作
• 逻辑和jQuery方案完全一致，只是没有依赖库

自定义扩展提示 #

• 如果需要添加更多省份或活动，只需要给活动选项加上对应的data-province属性即可
• 可以根据需求调整默认选项的文案或值
• 如果需要更复杂的关联逻辑（比如一个省份对应多个分组），可以扩展data-*属性的使用方式

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