下拉框切换选项仅首次选中项输出至控制台的问题求助

问题根源 #

你的JavaScript代码仅在页面首次加载时执行一次，它只会获取下拉菜单初始化时的默认选中值（也就是"All Categories"），之后用户切换选项时，代码不会自动重新执行，所以控制台不会输出新选中的选项值。

修复方案 #

你需要给下拉菜单添加选项变化事件监听，当用户切换选项时触发打印操作。以下是两种常用实现方式：

方式1：使用事件监听器（推荐，符合代码分离原则）

修改你的my_js.js代码：

const select = document.getElementById("categories");

// 定义处理函数：获取并打印选中值
function printSelectedValue() {
  // 两种获取选中值的方式都可以
  // 方式A：通过selectedIndex获取
  // const value = select.options[select.selectedIndex].value;
  // 方式B：直接读取select的value属性（更简洁）
  const value = select.value;
  console.log(value);
}

// 可选：页面加载时先打印一次初始值
printSelectedValue();

// 绑定change事件，选项切换时触发函数
select.addEventListener("change", printSelectedValue);

方式2：内联事件处理（快速实现）

直接在HTML的<select>标签中添加onchange属性：

<select id="categories" class="form-control" onchange="console.log(this.value)">
  <option value="All Categories">All Categories</option>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
</select>

补充说明 #

select.value可以直接获取当前选中选项的value值，无需通过selectedIndex去遍历选项，是更简便的写法。

内容的提问来源于stack exchange，提问作者equanimity