Menu
As far as I can tell this only is only broken in Internet Explorer. I have a script that creates multiple dynamic <select> elements and adds an onchange event for them. The onchange event fires in Firefox with no problem but in Internet Explorer it never fires. Using Developer Toolbar I see the DOM has the correct event listed, it just never fires. I've boiled down the problem to the following code:
<html>
<head>
<script language="javascript">
function addSelect() {
var se = document.createElement('select');
se.setAttribute("onchange", "alert('Dynamic')");
se.options[0] = new Option("1", "1");
se.options[1] = new Option("2", "2");
se.options[2] = new Option("3", "3");
se.options[3] = new Option("4", "4");
var plh = document.getElementById("ph");
plh.appendChild(se);
}
</script>
</head>
<body onload="addSelect()">
<select name="something" onchange="alert('Static')">
<optgroup label="set1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="set2">
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
</select>
<div id="ph">
</div>
</body>
</html>
The static alert message comes up fine, but the dynamic one doesn't do anything in Internet Explorer. I'm nearly positive I've seen this work elsewhere, but I can't seem to find other examples. Does anybody see/know of a way to get this to work?
871
Change:
se.setAttribute("onchange", "alert('Dynamic')");
to:
se.setAttribute("onchange", function(){alert('Dynamic')});
or even shorter:
se.onchange = function(){alert('Dynamic')};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
