如何在“选择”标签中编辑“onchange”属性？（使用jQuery）答案

【问题标题】：How to edit 'onchange' attribute in a 'select' tag? (using jquery)如何在“选择”标签中编辑“onchange”属性？（使用jQuery）
【发布时间】：2011-04-07 23:14:20
【问题描述】：

我正在尝试编辑现有“选择”元素的“onchange”事件。

例如，我有以下代码：

<select id="sel_id" onchange="javascript:foo();" >

每当我尝试更改其“onchange”属性时，我都会使用以下内容：

$("#sel_id").attr("onchange", "foo_2()");

仅供参考，这个应该没问题的代码不起作用，“onchange”属性保持不变。那么应该如何编辑呢？

修正：

您可以删除该属性，然后绑定不同的函数，例如：

$("#sel_id").removeAttr("onchange").bind("change", function(){ foo_2(); });

但问题仍然存在，是否可以在不删除它的情况下更改“onchange”属性？

【问题讨论】：

标签： jquery html events select

【解决方案1】：

不是问题的确切答案，但我可能会使用以下方法删除该事件：

document.getElementById('sel_id').onchange = undefined;

（见How to Clear/Remove JavaScript Event Handler?）

然后继续：

$('#sel_id').change(function() { foo_2(); });

【讨论】：

是的，这是正确答案，我确实需要删除事件并使用 jquery 绑定我自己的事件。
$('sel_id').attr('onchange',undefined).change(function() { foo_2(); }); 是 jQuery 的方式。这样你就可以用一个 jQuery 对象来做这两个操作。
OP 也可以只做.change(foo_2) 而不是包装在匿名函数中。
@Muhd 你的代码不起作用，但是当我将 undefined 更改为 null 它开始工作。

【解决方案2】：

如果我使用原生 setAttribute()，对我有用。

另外，请记住，您需要在选择器周围加上引号。

$("#sel_id")[0].setAttribute("onchange", "foo_2()");

还要记住在全局命名空间中定义 foo_2，而不是在 jQuery 的 .ready() 函数中。

【讨论】：

你说得对，我忘记了示例中的引号，但在实际代码中使用了引号。（编辑问题）setAttribute() 应该是该问题的解决方案，但它实际上与我提出的问题相同。如果在元素中声明了“onchange”属性，则不会替换它并触发旧的事件代码。此外，我宁愿在 onchange 事件中使用内部范围函数。因此，我实际上可能会使用我在修正案中提到的代码。
@vitorhsb - 从您对问题的补充来看，问题仍然是 foo() 被调用。这是在IE中吗？您可以尝试将其onchange 属性设置为空：$("#sel_id")[0].onchange = null;。不确定这是否会有所帮助，但也许值得一试。
这太棒了！ IE8 中似乎存在与将更改事件绑定到选择相关联的错误。我已经尝试了几乎所有的东西（addEventListener，以及 jQuery .change 和 .bind。都没有工作。但是，这样做了。谢谢！
@Cary：很高兴这有效，但很奇怪 jQuery 的事件处理不适合您。他们在解决这些浏览器问题方面做得很好。无论如何，很高兴你找到了解决方案。

【解决方案3】：

使用 JQuery 更改功能。

$('#sel_id').change(function() { //你的代码 });

【讨论】：

这样仍然会触发select标签中声明的onchange事件。
然后先使用$('#sel_id').unbind('change')
$('#sel_id').unbind('change') 实际上并没有删除html标签中声明的前一个事件，它只是删除了动态声明的绑定事件。

【解决方案4】：

这是一种仅使用 javascript 的方法：

<html>
<head>
<script type = "text/javascript" langauge="JavaScript">
function foo (){
    alert("foo");
}
function fi() {
    alert('fi');
}
</script>
</head>
<body>
<select id = "select_list" onchange="foo();">
<option value = "1">1</option>
<option value = "2">2</option>
</select>
<input type = "button" value = "change" onclick = "document.getElementById('select_list').onchange = fi;">
</body>
</html>

【讨论】：