如何实现下拉列表选择选项值并提交后弹出alert或显示文本框

该需求完全可以通过前端基础能力实现，无需依赖特殊框架或第三方工具。

核心实现逻辑 #

整体流程可拆解为三步，无复杂依赖：

• 为下拉选择框、提交按钮、文本展示容器设置唯一可识别的id标识，方便JS获取DOM节点
• 给提交按钮绑定点击事件监听，触发时先读取下拉框当前选中的option值
• 按需求选择触发形式：调用原生alert弹窗，或将读取到的选中值写入预留的文本展示容器

极简可运行代码示例 #

<select id="targetSelect">
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
  <option value="opt3">选项3</option>
</select>
<button id="submitBtn">提交</button>
<!-- 用于页面内展示文本的容器 -->
<div id="textShowArea" style="margin-top: 16px;"></div>

<script>
document.getElementById('submitBtn').addEventListener('click', (e) => {
  // 表单内嵌场景下，阻止默认提交的页面跳转行为
  e.preventDefault()
  // 获取下拉框选中值
  const currentSelectVal = document.getElementById('targetSelect').value
  // 1. 触发alert弹窗
  alert(`已提交选中值：${currentSelectVal}`)
  // 2. 在页面文本区域展示内容
  document.getElementById('textShowArea').innerText = `已提交的选中内容为：${currentSelectVal}`
})
</script>

注意事项 #

• 如果该组件是嵌在原生<form>表单内的，一定要在点击事件回调里加e.preventDefault()阻止默认提交跳转，否则页面刷新后弹窗会被立刻关闭、展示的文本也会消失
• 如果需要自定义弹窗样式替代原生alert，只需要把alert()的调用逻辑替换成自定义弹窗组件的显示方法，其余获取下拉值的逻辑完全不需要改动

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