级联下拉框动态更新

下面是一个基于HTML、CSS和JavaScript的级联下拉框动态更新的示例代码：

HTML代码：

<select id="country" onchange="updateStates()">
  <option value="">选择国家</option>
  <option value="USA">美国</option>
  <option value="Canada">加拿大</option>
  <option value="UK">英国</option>
</select>
<br>
<select id="state">
  <option value="">选择州/省份</option>
</select>

JavaScript代码：

// 定义各个国家对应的州/省份数据
var states = {
  "USA": ["加利福尼亚", "纽约", "德克萨斯"],
  "Canada": ["安大略省", "魁北克省", "不列颠哥伦比亚省"],
  "UK": ["伦敦", "曼彻斯特", "利物浦"]
};

// 更新州/省份下拉框的选项
function updateStates() {
  var countrySelect = document.getElementById("country");
  var stateSelect = document.getElementById("state");
  var selectedCountry = countrySelect.value;
  
  // 清空州/省份下拉框的选项
  stateSelect.innerHTML = "<option value=''>选择州/省份</option>";
  
  if (selectedCountry in states) {
    var countryStates = states[selectedCountry];
    
    // 添加州/省份选项
    for (var i = 0; i < countryStates.length; i++) {
      var option = document.createElement("option");
      option.value = countryStates[i];
      option.innerHTML = countryStates[i];
      stateSelect.appendChild(option);
    }
  }
}

CSS代码（可选，用于美化下拉框样式）：

select {
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

这段代码创建了两个下拉框，第一个是国家下拉框，第二个是州/省份下拉框。当选择国家下拉框的选项发生变化时，会调用updateStates()函数来更新州/省份下拉框的选项。states变量存储了各个国家对应的州/省份数据。在updateStates()函数中，首先获取选中的国家，然后根据选中的国家从states变量中获取对应的州/省份数据，并动态生成州/省份下拉框的选项。如果选中的国家没有对应的州/省份数据，则州/省份下拉框会显示默认选项。

你可以根据自己的需要修改代码，并根据具体的数据进行相应的调整。