title: In Internet Explorer, how do I programmatically change the (displayed) value of a 'select' element?
body: <p>I have an interactive graphic with a <code>&lt;select&gt;</code> element (a drop-down menu). It works fine — except in Internet Explorer.</p>
  
  <p>Essentially, I can't programmatically change the <code>&lt;select&gt;</code> element's selected (and hence displayed) value in IE. I need to do this programmatically because the <code>&lt;option&gt;</code> elements within the <code>&lt;select&gt;</code> element are populated dynamically each time the user makes a change. My program (not the one below):</p>
  
  <ul>
  <li>listens for the user to change the <code>&lt;select&gt;</code> element;</li>
  <li>stores the selected value as a variable;</li>
  <li>creates a new datalist, based on the selection, for the drop-down menu;</li>
  <li>uses this datalist to re-populate the <code>&lt;option&gt;</code> elements in the <code>&lt;select&gt;</code> element; and</li>
  <li>sets the displayed value in the <code>&lt;select&gt;</code> element as the selected variable.</li>
  </ul>
  
  <p>A version of the problem follows (I code with <code>d3.js</code>). The code below changes the <code>&lt;select&gt;</code> element's value every second. It works fine in most browsers — but try viewing it in IE:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;&lt;/select&gt;
  &lt;h1&gt;&lt;/h1&gt;
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    selector = d3.select("select"),
    answer = d3.select("h1"),
    fruit = ["apricots", "apples", "bananas", "grapefruit", "lemons", "oranges", "plums", "tangerines"];
  
    // fill the drop-down menu with fruit
    selector.selectAll("option")
        .data(fruit)
      .enter().append("option")
        .text(function(d) { return d; });
  
    // display the selected value under the menu
    answer.text(selector.property("value"));
  
    // change the selection every second
    changeValue = d3.interval(function() {
      selector.property("value", fruit[Math.random() * fruit.length | 0]);
      answer.text(selector.property("value"));
    }, 1000);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>