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

html中多级选择如何写

<!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()函数来更新城市选择框的选项,这个函数会根据选择的国家动态生成相应的城市选项。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。