title: Why does dynamically populating a select drop down list element using javascript not work in IE?
body: <p>I have a &lt;select&gt; element that I dynamically populate with different values at runtime.</p>
  
  <p>I use the code below to clear the &lt;option&gt; elements and then reload it with new ones. It works in Firefox 3.6.6 and Chrome 5.0.</p>
  
  <pre><code>function loadPickerFromObject(pickerControl, values) {
      pickerControl.empty();
      for (var nameProperty in values) {
          if (!$.isFunction(values[nameProperty])) {
              var option = $("&lt;option&gt;&lt;/option&gt;")
                  .text(values[nameProperty])
                  .attr("value", nameProperty)
                  .appendTo(pickerControl);
          }
      }
  }
  </code></pre>
  
  <p>(I'm not fond of writing javascript and try to stay away from it, if there is a better way of dynamically populating a &lt;select&gt; element from the properties of an object please show how)</p>
  
  <p>It doesn't work in IE 8. When I debug using Visual Studio I can see that the new items were loaded correctly, but when I check the page they're not updated and display the old items.</p>
  
  <p><img src="https://farm5.static.flickr.com/4101/4795662114_60ef957f08.jpg" alt="alt text">
  <img src="https://farm5.static.flickr.com/4082/4795029523_0cae54c3d2.jpg" alt="alt text"></p>
  
  <p>What's up with that? It should display the elements displayed in the Text Visualizer window (first screenshot). Why is it not showing the new values?</p>