用js代码写一个动态的下拉二级菜单
时间: 2023-08-23 10:06:49 浏览: 42
好的,以下是一个简单的示例代码,用于创建一个动态的下拉二级菜单:
HTML代码:
```
<select id="menu" onchange="showSubMenu()">
<option value="">请选择</option>
<option value="1">菜单1</option>
<option value="2">菜单2</option>
<option value="3">菜单3</option>
</select>
<div id="submenu" style="display: none;">
<select>
<option value="">请选择</option>
<option value="1.1">子菜单1</option>
<option value="1.2">子菜单2</option>
<option value="1.3">子菜单3</option>
</select>
</div>
```
JavaScript代码:
```
function showSubMenu() {
var selectBox = document.getElementById("menu");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
var subMenu = document.getElementById("submenu");
if (selectedValue == "") {
subMenu.style.display = "none";
} else {
subMenu.style.display = "block";
}
}
```
这段代码可以创建一个包含下拉菜单和子菜单的简单界面。当用户选择主菜单时,JavaScript代码将检测到所选的值,然后显示或隐藏子菜单,具体取决于用户的选择。