html二级下拉列表
时间: 2023-08-21 10:15:34 浏览: 86
你可以使用 HTML 的 `<select>` 和 `<option>` 标签来创建二级下拉列表。下面是一个简单的示例代码:
```html<form>
<label for="cars">选择汽车品牌:</label>
<select id="cars" name="cars">
<option value="">请选择品牌</option>
<option value="audi">奥迪</option>
<option value="bmw">宝马</option>
<option value="mercedes">奔驰</option>
</select>
<br>
<label for="models">选择汽车型号:</label>
<select id="models" name="models">
<option value="">请选择型号</option>
</select>
</form>
```
上述代码中,第一个 `<select>` 标签用于选择汽车品牌。当选择某个品牌时,通过 JavaScript 可以动态生成对应的汽车型号选项。下面是一个使用 JavaScript 动态生成选项的示例代码:
```html<script>
var carModels = {
audi: ["A1", "A3", "A4"],
bmw: ["X1", "X3", "X5"],
mercedes: ["C-Class", "E-Class", "S-Class"]
};
var carBrands = document.getElementById("cars");
var carModelsDropdown = document.getElementById("models");
carBrands.addEventListener("change", function() {
var selectedBrand = carBrands.value;
carModelsDropdown.innerHTML = ""; // 清空之前的选项 if (selectedBrand !== "") {
// 根据选择的品牌生成对应的型号选项 var models = carModels[selectedBrand];
for (var i =0; i < models.length; i++) {
var option = document.createElement("option");
option.text = models[i];
option.value = models[i];
carModelsDropdown.appendChild(option);
}
}
});
</script>
```
上述 JavaScript代码中,当选择汽车品牌时,会根据选择的品牌动态生成对应的型号选项,并将其添加到第二个 `<select>` 标签中。
这只是一个简单的示例,你可以根据自己的需求对代码进行修改和扩展。希望对你有所帮助!