更改选择的“onchange”答案

【问题标题】：Change 'onchange' of select更改选择的“onchange”
【发布时间】：2016-10-06 03:15:39
【问题描述】：

我有一个带有 onchange 的选择框：

<select id="select" onchange="eventA();">

我想将“onchange”更改为其他内容，例如更改为 eventB();。

我已经尝试过了，基于这篇文章：How to add an onchange event to a select box via javascript?

document.getElementById("select").onchange="eventB()";

但是，什么都没有发生，onchange 没有改变。

有什么想法吗？

【问题讨论】：

将其分配给函数引用。
感谢您的回复！能举个例子吗？
document.getElementById("select").onchange = eventB; 假设 eventB 是一个函数。
我认为 Andrew L 在这里是正确的。

标签： javascript html

【解决方案1】：

嗨，你应该试试这个代码。

<html>
  <head>
  <title> Script </title>
  <script type='text/javascript'>
    function changeFirst(){
      alert('I am first');
    }
    
    function changeSecond(){
      alert('I am second');
    }
    
    function changer(){
      document.getElementById('selectinput').attributes.onchange.nodeValue = "changeSecond()";
    }
  </script>
  </head>
  <body onload="changer()">
    <select id="selectinput" onchange="changeFirst()">
      <option value="1"> One </option>
      <option value="2"> two </option>
      <option value="3"> three </option>
      <option value="4"> four </option>
      <option value="5"> five </option>
    </select>
  </body>
</html>

使用 jquery 代替纯 javascript 有点容易。但是使用 javascript，您不能在目录中更改任何属性，例如 value 或 innerHTML。 document.getElementById('ELEMENT_ID') 将返回 html 标记而不是对象。您可以使用 document.getElementById('ELEMENT_ID').value = 'your_value' 更改值，但更改任何事件属性都不是这样。 document.getElementById('ELEMENT_ID').attribute 将返回元素的所有使用属性，您可以使用 nodeValue 更改它的值，如我在示例中所示。

根据您的需要进一步澄清，如果您在选择框更改事件中编写此代码，而不是每次调用第一个事件时，例如如果我将 changer() 函数代码写入 changeFirst() 函数，则选择框的 change 事件将在第一次触发 changeFirst() ，并且从下一次开始 changeSecond() 事件将触发。所以我建议你使用 jquery 更改事件而不是使用纯 javascript 来防止这种类型的混淆。

【讨论】：

你为什么要立即改变身体负荷的处理程序？
这只是一个例子。你也可以随意改变它。
声明“但使用 javascript 你不能在目录中更改任何属性，如 value 或 innerHTML”是不正确的。属性值可以更改，而 innerHTML 不是属性，它是 DOM 属性。此外，语句“document.getElementById('ELEMENT_ID') will return html tag not an object”是完全错误的，它返回一个 DOM 对象或 null。

【解决方案2】：

答案在评论中。对于您的代码：

document.getElementById("select").onchange="eventB()";

你不应该将属性设置为字符串，你应该分配一个函数引用，所以：

document.getElementById("select").onchange = eventB;

分配字符串可能在某些浏览器中有效，但所有浏览器都支持分配函数。

您可能会发现MDN onchange article 很有帮助，它还包含相关标准的链接。

【讨论】：

【解决方案3】：

我会为您的班级配备一个经典的香草 javascript 事件侦听器。喜欢：

var select = document.getElementById("select");
select.addEventListener("change", function(){
    eventB();
});

或者：

var select = document.getElementById("select");
select.addEventListener("change", eventB);

【讨论】：

【解决方案4】：

ILE，你能试试这个代码吗：

document.getElementById('select').setAttribute('onchange','eventB();');

【讨论】：