选择 onChange 在表单中不起作用答案

【问题标题】：select onChange not working inside a form选择 onChange 在表单中不起作用
【发布时间】：2013-02-01 22:00:10
【问题描述】：

我有一个关于表单提交和 onchange 事件不能一起工作的问题。当我更改下拉列表中的值时，事件 viewroom() 没有触发。谁能帮我解决这个问题？代码如下

<script type="text/javascript">
function viewroom()
{
    alert(123);
}
</script>

<form id="myform" name="myform" action="joinroom.php" method="post">
<select name="viewroom" id="viewroom" onChange="viewroom()">
    <option value="1">Room1 </option>
    <option value="2">Room2 </option>
</select>
<input type="submit" onclick="this.form.submit()" value="Join room"><br>
</form>

【问题讨论】：

标签： javascript forms select option onchange

【解决方案1】：

您的函数名称与select 中的name 和id 冲突，请给函数取另一个名称。

【讨论】：

另外有趣的是，如果我将 select 语句移到表单之外，那么 onChange 事件将毫无问题地工作。（这是正常的还是我很幸运？）
不幸的是，我不知道，代码似乎与您描述的完全一样。
这不完全是我的问题，但我确实有命名冲突。指导我朝着好的方向发展的要点。谢谢！
太棒了！谢谢！

【解决方案2】：

您不能将函数命名为与页面上的元素相同的名称。我建议将函数名称更改为 viewroomSelected 之类的名称，如 here in this jsFiddle 所示。

相关变化：

function viewroomSelected()
{
  alert(123);
}

<select name="viewroom" id="viewroom" onChange="viewroomSelected()">

【讨论】：

【解决方案3】：

我发现当你设置name和id属性相同的你的函数名导致这个冲突并提示错误viewroom不是一个函数，更改函数的名称。还要在文档底部定义你的 js。

function viewRoom()
{
    alert(123);
}

Working Demo

【讨论】：

【解决方案4】：

改变

<select name="viewroom" id="viewroom" onChange="viewroom()">

到

<select name="viewroom" id="viewroom" onChange="()=>viewroom()">

【讨论】：