В Internet Explorer, как программно изменить (отображаемое) значение элемента select?

Question

У меня есть интерактивная графика с элементом <select> (раскрывающееся меню).Он работает нормально - за исключением Internet Explorer.

По сути, я не могу программно изменить выбранное (и, следовательно, отображаемое) значение элемента <select> в IE.Мне нужно сделать это программно, потому что элементы <option> в элементе <select> заполняются динамически каждый раз, когда пользователь вносит изменения.Моя программа (не та, что ниже):

• прослушивает, чтобы пользователь изменил элемент <select>;
• сохраняет выбранное значение как переменную;
• создает новый список данных на основе выбора для выпадающего меню;
• использует этот список данных для повторного заполнения элементов <option> в элементе <select>;и
• устанавливает отображаемое значение в элементе <select> в качестве выбранной переменной.

Ниже приводится версия проблемы (я кодирую с d3.js).Код ниже меняет значение элемента <select> каждую секунду.Он отлично работает в большинстве браузеров - но попробуйте просмотреть его в 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>

Answer 1

Как насчет установки свойства опции для выбранного (в отличие от установки значения выбора для опции).У меня это работает в 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>