Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically added SELECT element does not fire onchange event in Internet Explorer
    text
    copied!<p>As far as I can tell this only is only broken in Internet Explorer. I have a script that creates multiple dynamic &lt;select&gt; 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:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="javascript"&gt; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="addSelect()"&gt; &lt;select name="something" onchange="alert('Static')"&gt; &lt;optgroup label="set1"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="set2"&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt; &lt;div id="ph"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload