选择下拉列表项而不触发 onchange 事件？

Posted 2023-03-14

【中文标题】选择下拉列表项而不触发 onchange 事件？

【英文标题】：Select drop-list item without triggering onchange event?

【发布时间】：2014-07-22 11:33:59

【问题描述】：

我想用几个项目填充下拉列表并选择一个默认项目：

<select onchange="DoSomething(this)">
    <option value="abb">This is the second item</option>
    <option value="abc" selected>This is the third item</option>
    etc...
</select>

但是，在 用户 选择一个项目之前，我不希望 onChange 事件触发（或者我希望忽略 onChange 触发的代码）。目前 onChange 事件会在页面加载时触发，并且默认情况下会选择所选项目。

我可以将此代码包装在 php 中以实现此目的吗？如果可以，如何实现？

【问题讨论】：

您是特别想要 php 代码还是 javascript 可以接受？另外，您为什么不能使用onclick 并在onclick 处理程序中附加onchange？

你说的毫无意义。由于该标签上的selected 命令，您的选择选项将加载选项This is the third item。当您更改此选项时，对 this is the second item 说，然后您的 onchange 将被触发。如果它在页面加载时触发，而不是您在其他地方再次调用它。

您可以在页面加载后从 javascript 生成 onchange 事件。

抱歉，澄清一下 - 假设“DoSomething”会出现一个警告框。就目前而言，一旦页面加载，就会出现警报框，因为下拉列表有一个默认项目。如果用户从下拉列表中选择不同的项目，我只希望出现警报框。

安迪，这不应该发生，除非你通过 js 设置 selected 属性

【参考方案1】：

?!

直接在 JavaScript 中操作 html DOM 不会触发事件。你甚至可以调用myForm.submit()，浏览器不会触发表单的onsubmit 事件，从而绕过客户端的onsubmit 验证。

我不知道您尝试了什么，但这是选择下拉列表的第一项的一种方法：

document.getElementsByTagName('select')[0].getElementsByTagName('option')[0].selected = true;

(http://jsfiddle.net/Jawh6/)

原油，我知道。通常您的表单和字段会被命名或以其他方式标识，以便您可以更明确地处理它们：例如document.myForm.mySelect.options[0].selected = true;

---

由于您的 PHP 已经在选项上设置了 'selected' 属性（或者您的问题没有很好地标记），这将是在页面加载时设置默认选项的最佳位置，不需要 JavaScript全部。

如果您对如何让 PHP 为 select 元素写出 HTML 并正确地将 selected 属性分配给预期选项感兴趣，我认为您需要编写一个新问题来吸引 PHP 人员。

---

您对 DoSomething 函数有其他调用，或者您过于简化了示例，并且您实际上是在使用框架将事件处理程序绑定到该字段，并且您可能不小心调用了您的函数而不是分配它，例如：

mySelect.onchange = DoSomething(); // oops, this calls DoSomething right away.

mySelect.onchange = DoSomething; // this sets DoSomething as the event handler.