HTML一级栏目下拉二级栏

HTML中创建一级栏目下拉二级栏通常使用`<select>`元素配合`<option>`元素来实现。这是一个简单的示例：

<select id="parentDropdown">
  <!-- 一级栏目 -->
  <option value="category1">一级栏目1</option>
  <option value="category2">一级栏目2</option>
  <!-- 更多一级栏目... -->
</select>

<!-- 当用户选择一级栏目后，显示对应的二级栏目 -->
<div id="childDropdown" style="display:none;">
  <select id="subDropdown">
    <!-- 根据选中的一级栏目动态添加选项 -->
    <script>
      document.getElementById('parentDropdown').addEventListener('change', function() {
        var selectedCategory = this.value;
        // 动态填充子级下拉框，例如从服务器获取数据或预设数据
        if (selectedCategory === 'category1') {
          document.getElementById('subDropdown').innerHTML = `
            <option value="subcategory1">二级栏目1</option>
            <option value="subcategory2">二级栏目2</option>
          `;
        } else if (selectedCategory === 'category2') {
          document.getElementById('subDropdown').innerHTML = `
            <option value="subcategory3">二级栏目3</option>
            <option value="subcategory4">二级栏目4</option>
          `;
        }
      });
    </script>
  </select>
</div>

在这个例子中，当用户在一级栏目下拉菜单中选择一个选项时，对应的二级栏目会根据选择的内容动态地显示出来。