html中多级选择如何写

admin
行业动态
2024-03-27
3645

在HTML中，多级选择通常使用<select>标签和嵌套的<option>标签来实现，以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>多级选择示例</title>
</head>
<body>
<h2>多级选择示例</h2>
<form>
  <label for="countries">国家：</label>
  <select id="countries" onchange="updateCities()">
    <option value="china">中国</option>
    <option value="usa">美国</option>
  </select>
  <label for="cities">城市：</label>
  <select id="cities">
    <!这里将根据选择的国家动态更新城市选项 >
  </select>
</form>
<script>
function updateCities() {
  var countriesSelect = document.getElementById("countries");
  var citiesSelect = document.getElementById("cities");
  var selectedCountry = countriesSelect.value;
  // 清空城市选择框
  citiesSelect.innerHTML = "";
  // 根据选择的国家添加城市选项
  if (selectedCountry === "china") {
    citiesSelect.innerHTML = `
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    `;
  } else if (selectedCountry === "usa") {
    citiesSelect.innerHTML = `
      <option value="newyork">纽约</option>
      <option value="losangeles">洛杉矶</option>
      <option value="chicago">芝加哥</option>
    `;
  }
}
</script>
</body>
</html>

在这个示例中，我们创建了一个包含两个<select>标签的表单，第一个<select>标签用于选择国家，第二个<select>标签用于选择城市，当用户选择一个国家时，会触发onchange事件，调用updateCities()函数来更新城市选择框的选项，这个函数会根据选择的国家动态生成相应的城市选项。