如何使用 JavaScript 实现一个简单的网页下拉菜单效果？

使用 JavaScript 实现网页下拉菜单

1. 首先，在 HTML 中定义一个下拉列表：

<select id="example-select">
  <option value="0">Option 1</option>
  <option value="1">Option 2</option>
  <option value="2">Option 3</option>
</select>

2. 接下来，创建一个访问 select 元素的变量，并将 change 事件监听绑定到其上：

const selectElement = document.getElementById('example-select');

selectElement.addEventListener('change', (event) => {
  // 在这里添加代码
});

3. 监听器回调函数应该从事件参数中获取选中项的值，并将其作为网页更新的依据：

const selectElement = document.getElementById('example-select');

selectElement.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  // 更新网页
});

4. 最后，根据所选值，更新网页：

const selectElement = document.getElementById('example-select');

selectElement.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  updatePage(selectedValue);
});

function updatePage(value) {
  // 根据所选值更新网页
}