在HTML5中，
在上面的例子中，我们有一个包含三个主要选项的下拉菜单，其中第二个选项“选项2”包含了两个嵌套的子选项。
动态添加嵌套选项
在实际应用中，我们通常需要根据某些条件动态地添加或移除嵌套选项。以下是一个使用JavaScript实现动态添加嵌套选项的例子：
// 假设我们有一个函数，根据父选项的值来动态添加子选项
function addNestedOptions(parentValue) {
var selectElement = document.getElementById(‘parentSelect’);
// 清除现有子选项
selectElement.querySelectorAll(‘option[value=”‘ + parentValue + ‘-1″], option[value=”‘ + parentValue + ‘-2″]’).forEach(function(option) {
option.remove();
});
// 添加新的子选项
var newOption1 = document.createElement(‘option’);
newOption1.value = parentValue + ‘-1’;
newOption1.textContent = ‘新的子选项1’;
selectElement.appendChild(newOption1);
var newOption2 = document.createElement(‘option’);
newOption2.value = parentValue + ‘-2’;
newOption2.textContent = ‘新的子选项2’;
selectElement.appendChild(newOption2);
}
// 为父选项添加事件监听器
document.getElementById(‘parentSelect’).addEventListener(‘change’, function() {
var selectedValue = this.value;
if (selectedValue === ‘2’) {
addNestedOptions(selectedValue);
}
});
在上面的代码中，我们定义了一个
addNestedOptions
函数，该函数根据选中的父选项值动态添加子选项。我们还为父下拉菜单添加了一个事件监听器，当用户选择不同的选项时，会触发函数调用。
总结
通过嵌套