使用JavaScript实现下拉框点击选择及级联下拉框联动功能

要实现选择不同国家时，州/省下拉框选项自动更新的联动效果，用JavaScript监听国家下拉框的change事件就能轻松搞定。下面是具体的实现步骤和代码：

1. 完善HTML结构 #

首先给州/省下拉框加上明确的ID，方便后续JS操作，同时保留默认的美国州选项（你可以根据需求补充完整）：

<!-- 国家下拉框 -->
<select class="select optional" name="order[billing_country]" id="order_billing_country" aria-invalid="false">
  <option selected="selected" value="USA">USA</option>
  <option value="CANADA">CANADA</option>
</select>

<!-- 州/省下拉框 -->
<select class="select optional" name="order[billing_state]" id="order_billing_state" aria-invalid="false">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <!-- 其他美国州选项可在此补充 -->
</select>

2. 编写联动逻辑的JavaScript #

我们先定义一个映射对象来存储不同国家对应的州/省数据，然后监听国家下拉框的变化，动态替换州/省的选项：

// 存储国家与对应州/省的映射关系
const stateMap = {
  USA: [
    { value: "AL", text: "Alabama" },
    { value: "AK", text: "Alaska" },
    { value: "CA", text: "California" },
    // 这里可以继续添加更多美国州的选项
  ],
  CANADA: [
    { value: "AB", text: "Alberta" },
    { value: "BC", text: "British Columbia" },
    { value: "ON", text: "Ontario" },
    // 这里可以继续添加更多加拿大省份的选项
  ]
};

// 获取两个下拉框元素
const countrySelect = document.getElementById('order_billing_country');
const stateSelect = document.getElementById('order_billing_state');

// 监听国家下拉框的切换事件
countrySelect.addEventListener('change', () => {
  const selectedCountry = countrySelect.value;
  const states = stateMap[selectedCountry] || [];
  
  // 清空当前州/省下拉框的所有选项
  stateSelect.innerHTML = '';
  
  // 动态生成新的州/省选项并添加到下拉框中
  states.forEach(state => {
    const option = document.createElement('option');
    option.value = state.value;
    option.textContent = state.text;
    stateSelect.appendChild(option);
  });
});

// 页面加载完成后初始化州/省选项（确保默认选中USA时显示正确的州）
document.addEventListener('DOMContentLoaded', () => {
  const defaultCountry = countrySelect.value;
  const defaultStates = stateMap[defaultCountry] || [];
  
  stateSelect.innerHTML = '';
  defaultStates.forEach(state => {
    const option = document.createElement('option');
    option.value = state.value;
    option.textContent = state.text;
    stateSelect.appendChild(option);
  });
});

额外说明 #

• 如果后续需要支持更多国家，只需要在stateMap对象中添加对应的键值对即可，扩展性很强。
• 代码中加入了DOMContentLoaded事件监听，确保页面刚加载时，默认选中的国家对应的州/省选项能正确显示，避免出现初始状态下州选项不匹配的问题。

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