html js下拉菜单

HTML和JavaScript结合可以创建动态交互式的下拉菜单，这种菜单通常用于提供选项让用户选择。在HTML中，基本的下拉菜单（<select>）是静态的，而JavaScript则可以添加动态行为，如显示或隐藏选项、处理用户选择等。

HTML中的基本下拉菜单（即<select>）示例：

<select id="dropdownMenu">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

JavaScript可以通过`document.getElementById()`获取这个元素，并操作其`options`属性来动态添加、删除选项，或者监听`change`事件：

// 获取下拉菜单元素
var dropdown = document.getElementById("dropdownMenu");

// 添加新选项
var newOption = document.createElement("option");
newOption.text = "New Option";
newOption.value = "newOption";
dropdown.add(newOption);

// 监听选择改变
dropdown.addEventListener("change", function() {
  console.log("Selected option:", this.value);
});