title: JQuery - dynamic selects and options not working in IE9
body: <p>I have a dynamic select that needs to be driven off another select, but I cannot seem to get it working in IE (using IE9). I've seen this post here but (unless I'm not understanding it) this didn't seem to help: <a href="https://stackoverflow.com/questions/8004365/dynamic-related-selects-with-jquery-not-work-in-ie">Dynamic Related Selects with jQuery, not work in IE</a>. </p>
  
  <p>I've really simplified it so that it's easy to understand the problem. I have 2 selects, and 1 drives the other. So, when you select something in the first one, the second one changes. For this example I'm just adding a new item to the select and even this doesn't work in IE:</p>
  
  <pre><code>var mydiv = $("#testdiv");
  $("&lt;select id='f1'&gt;").appendTo(mydiv);
  $("&lt;select id='f2'&gt;").appendTo(mydiv);
  $("#f1").append("&lt;option value='1'&gt;1&lt;/option&gt;");
  $("#f1").append("&lt;option value='2'&gt;2&lt;/option&gt;");
  $("#f2").append($("&lt;option&gt;").attr("value", "n"));
  $("#f1").change(function () {
      $("#f2").append("&lt;option value='t1'&gt;t1&lt;/option&gt;");
  });
  
  &lt;div id="testdiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>So, in theory we should start with 2 select lists and "f2" will 1 blank option in it. </p>
  
  <p>Next, select an item from "f1" and it will add a new option to "f2".</p>
  
  <p>This works exactly as I want in firefox and chrome. In IE it just behaves oddly. Take this example in IE:</p>
  
  <p>Scenario 1</p>
  
  <ol>
  <li>I open the page and check the "f2" select. It has 1 blank value</li>
  <li>I select an item in "f1"</li>
  <li>I check "f2" and it still has 1 blank value</li>
  </ol>
  
  <p>Scenario 2</p>
  
  <ol>
  <li>I open the page and don't touch the "f2" select.</li>
  <li>I select an item in "f1"</li>
  <li>I check "f2" and it has 2 items!</li>
  <li>I select another item in "f1"</li>
  <li>I check "f2" and it still has 2 items?!?</li>
  </ol>
  
  <p>So it looks like the first time I activate the select control it must do something with the existing HTML... and now that's all it's going to render from here on...</p>
  
  <p>This is driving me nuts, what am I doing wrong?!?</p>
  
  <p>Note: Not sure if it matters, but both of the selects are dynamically generated using javascript/jquery because I don't know their values until an async call completes. </p>
  
  <p><strong><em>Updated question due to investigation through comments... Seems my last note on the dynamic creation of the objects was crucial to recreating the problem</em></strong></p>