选择 onChange 在表单中不起作用

Posted 2023-03-11

【中文标题】选择 onChange 在表单中不起作用

【英文标题】：select onChange not working inside a form

【发布时间】：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>

【参考方案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()">