HTML表单中如何使用select/option标签触发JS函数

核心问题原因 #

你的exampleName()函数默认是按照单选框的取值逻辑编写的，替换为select元素后取值逻辑不兼容，是导致函数运行终止的最常见原因：

• 同name属性的多个单选框，用document.forms.example.speed获取到的是多个input元素组成的集合，需要遍历查找checked为true的选项取值
• 替换为select元素后，document.forms.example.speed获取到的是单个select元素，直接取.value属性就能拿到当前选中值，原有遍历逻辑会直接报错终止函数运行

你之前给select加事件不生效不是事件绑定错误，select本身用onchange绑定事件完全符合规范，失效是函数内部报错导致的。

修复方案 #

1. 规范select事件写法（可选，提升兼容性） #

改成全小写onchange，可直接把选中值传给函数减少取值逻辑修改：

<select name="speed" onchange="exampleName(this.value)">
    <option value="5M" >5M</option>
    <option value="10M">10M</option>
    <option value="15M">15M</option>
</select>

2. 调整exampleName函数取值逻辑 #

直接接收传入的选中值即可，原有其他逻辑不需要修改：

function exampleName(speedVal){
  // 原有逻辑直接使用speedVal参数即可
  // 如果你不想修改传参写法，也可以直接用下行代码取值
  // const speedVal = document.forms.example.speed.value
}

datalist场景的补充说明 #

datalist本身不触发事件，你需要给绑定datalist的input元素加oninput或onchange事件：

<input type="text" list="speedList" name="speed" oninput="exampleName(this.value)">
<datalist id="speedList">
  <option value="5M">
  <option value="10M">
  <option value="15M">
</datalist>

内容的提问来源于stack exchange，提问作者The Network Dude