表单中的select onChange事件无法工作

Question

我有一个关于表单提交和 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>

- Shih-Min Lee

Answer 1

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

- Teemu

---

有趣的是，如果我将选择语句移到表单外面，那么onChange事件就可以正常工作。（这是正常情况还是我很幸运？） - Shih-Min Lee

很遗憾，我不知道，但代码似乎按照你描述的方式正常工作。 - Teemu

这并不是我的问题，但我确实遇到了命名冲突。感谢您指引我朝着正确的方向前进。谢谢！ - ewH

太棒了！谢谢！ - Majali

Answer 2

您不能将函数命名为页面上的元素名称。建议将函数名称更改为像这个jsFiddle中所示的viewroomSelected之类的名称。

相关更改：

function viewroomSelected()
{
  alert(123);
}

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

- Austin Mullins

---

有趣的限制！谢谢 - Andreas Covidiot

Answer 3

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

function viewRoom()
{
    alert(123);
}

Working Demo

- Zaheer Ahmed

Answer 4

只是提供一些提示，不适用于这种情况，有人可能添加了一个新的和不同的函数来代替旧的。

<select ... onchange="anOldFuncion()">

而在 JavaScript 中，你随后执行了：

selectX.onchange = function(){};  //bye bye function from the tag.

这段代码的命名太糟糕了。我会选择：

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

- Sergio Abreu

Answer 5

更改

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

到

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

- Prateek Arora