In Internet Explorer, how do I programmatically change the (displayed) value of a 'select' element?

Question

I have an interactive graphic with a <select> element (a drop-down menu). It works fine — except in Internet Explorer.

Essentially, I can't programmatically change the <select> element's selected (and hence displayed) value in IE. I need to do this programmatically because the <option> elements within the <select> element are populated dynamically each time the user makes a change. My program (not the one below):

listens for the user to change the <select> element;
stores the selected value as a variable;
creates a new datalist, based on the selection, for the drop-down menu;
uses this datalist to re-populate the <option> elements in the <select> element; and
sets the displayed value in the <select> element as the selected variable.

A version of the problem follows (I code with d3.js). The code below changes the <select> element's value every second. It works fine in most browsers — but try viewing it in IE:

<select></select>
<h1></h1>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
  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);
</script>

Internet Explore stopped being supported in 2016?https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support — takintoolong, Dec 20 '18 at 03:56
@Markus what does a `console.log(fruit[Math.random()*fruit.length | 0])` give you in internet explorer in the d3.interval function? — Tyler Sells, Dec 20 '18 at 04:14
@takintoolong: I wish! I work in the news media. About 5% of our readers use IE for some reason. Our chief dev says we can only ignore browser cohorts if they drop below 3%. — Markus, Dec 20 '18 at 05:30
@rioV8: Adding "| 0" after calling the Math.random() function is a shortcut for Math.floor(). Explanation: https://stackoverflow.com/questions/48815850/javascript-random-number-one-zero-implementation — Markus, Dec 20 '18 at 05:34
@TylerSells: It's not really relevant because that random call isn't in my actual code; I wrote it to demonstrate the problem. But since you asked, after five seconds it reads: `apples, plums apricots, oranges, grapefruit`. — Markus, Dec 20 '18 at 05:50

score 1 · Accepted Answer · answered Dec 20 '18 at 05:27

What about setting the property of an option to selected (as opposed to setting the value of the select to an option). It works for me in IE:

  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() {
    var random = Math.floor(Math.random() * fruit.length);
    selector.selectAll("option").filter(function(d,i) { return i == random }).property("selected",true);
   // selector.property("value", fruit[Math.random() * fruit.length | 0]);
    answer.text(selector.property("value"));
  }, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<select></select>
<h1></h1>

Thanks Andrew, you're helpful as always. I didn't know about the `selected` property. What a shame I'll need to implement this solution, which is ugly (but works). — Markus, Dec 20 '18 at 06:06

In Internet Explorer, how do I programmatically change the (displayed) value of a 'select' element?

1 Answers1