如何获取combobox选中项的值并绑定到按钮点击事件？

核心实现逻辑 #

• 提前为ComboBox的每个选项绑定对应目标值（比如跳转地址）
• 为按钮注册点击事件监听器
• 点击按钮时先读取ComboBox当前选中项的绑定值
• 校验值合法后执行对应逻辑（如页面跳转）

原生HTML+JS代码示例 #

<!-- 页面结构：下拉选择框+打开按钮 -->
<select id="selectBox">
  <option value="apple_official_site_url">Apple</option>
  <option value="microsoft_official_site_url">Microsoft</option>
  <option value="google_official_site_url">Google</option>
</select>
<button id="openBtn">打开</button>

<script>
// 绑定按钮点击事件
document.getElementById('openBtn').addEventListener('click', function() {
  // 获取下拉框选中项的value值
  const selectedVal = document.getElementById('selectBox').value;
  if (selectedVal) {
    // 此处替换为实际跳转逻辑即可
    console.log('当前选中项对应地址：', selectedVal)
  }
})
</script>

补充说明 #

• 如果使用Vue、React等前端框架，实现逻辑一致，仅获取选中值的写法跟随框架语法调整即可
• 可根据需求添加选中值为空的提示逻辑，优化用户体验

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