求助：使用JavaScript实现国家与州/省下拉菜单联动功能

HTML 结构 #

先准备两个下拉菜单，给每个州/省选项添加data-country属性绑定对应国家：

<!-- 国家选择下拉 -->
<select id="countrySelect">
  <option value="">请选择国家</option>
  <option value="canada">Canada</option>
  <option value="mexico">Mexico</option>
  <option value="usa">USA</option>
</select>

<!-- 州/省选择下拉，所有选项预先定义 -->
<select id="stateProvinceSelect">
  <!-- Canada 省份 -->
  <option value="ontario" data-country="canada">Ontario</option>
  <option value="quebec" data-country="canada">Quebec</option>
  <option value="british-columbia" data-country="canada">British Columbia</option>
  
  <!-- Mexico 州 -->
  <option value="mexico-city" data-country="mexico">Ciudad de México</option>
  <option value="jalisco" data-country="mexico">Jalisco</option>
  <option value="yucatan" data-country="mexico">Yucatán</option>
  
  <!-- USA 州 -->
  <option value="california" data-country="usa">California</option>
  <option value="texas" data-country="usa">Texas</option>
  <option value="new-york" data-country="usa">New York</option>
</select>

JavaScript 联动逻辑 #

监听国家选择的变化，过滤并渲染对应选项：

// 获取DOM元素
const countrySelect = document.getElementById('countrySelect');
const stateProvinceSelect = document.getElementById('stateProvinceSelect');
// 保存所有预定义的州/省选项
const allStateOptions = Array.from(stateProvinceSelect.querySelectorAll('option'));

// 绑定国家选择事件
countrySelect.addEventListener('change', function() {
  const selectedCountry = this.value;
  
  // 清空当前州/省下拉菜单
  stateProvinceSelect.innerHTML = '';

  if (!selectedCountry) {
    // 未选择国家时显示提示
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '请先选择国家';
    stateProvinceSelect.appendChild(defaultOption);
    return;
  }

  // 筛选对应国家的选项
  const filteredOptions = allStateOptions.filter(option => option.dataset.country === selectedCountry);

  // 添加对应类型的提示选项（省份/州）
  const hintText = selectedCountry === 'canada' ? '请选择省份' : '请选择州';
  const hintOption = document.createElement('option');
  hintOption.value = '';
  hintOption.textContent = hintText;
  stateProvinceSelect.appendChild(hintOption);

  // 将筛选后的选项添加到下拉菜单
  filteredOptions.forEach(option => {
    stateProvinceSelect.appendChild(option.cloneNode(true));
  });
});

功能说明 #

• 通过data-country属性实现选项与国家的关联，无需额外维护映射对象
• 切换国家时自动过滤并渲染对应选项，保留原始选项的结构
• 根据所选国家动态显示“省份”或“州”的提示文本，符合需求

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