Question

我想做什么

在IE 11上的选择元素中动态更改所选选项元素的标签。

我期待的是

随着所选选项元素的标签发生变化，选择元素上显示的文字也会发生变化。

实际发生的事情

IE 11忽略了选项元素的标签正在被更改的事实。在再次选择选择元素之前，选择元素上显示的所选选项元素和相应文本不会更改。

请参阅以下代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <script defer src="script.js"></script>
    </head>
    <body>
        <select>
            <option id="option1">Option 1</option>
            <option id="option2">Option 2</option>
            <option id="option3">Option 3</option>
        </select>
        <input id="field1" oninput="setLabel()" \>
    </body>
</html>

的JavaScript

function setLabel() {
    var text = document.getElementById("field1").value;
    document.getElementById("option1").label = text;
}

因此，在<{1}}上保留选择元素，在输入字段中输入文本。在选择选择元素之前，选项元素不会更新其文本。

它在Chrome中正常运行。有关如何破解或提醒IE11更新的任何想法吗？

Answer 1

在IE11中测试 - 不是模拟器。哇...这就是这个hacky，但我认为它可以满足您的需求。重新渲染需要控制台日志调用以及远离和返回所选选项的多个更改。任何更少的东西，标签有时是一个或两个击键。

function setLabel() {
  let inputText = document.getElementById("field1").value,
    selectField = document.getElementById("select1");

  selectField.value = "2";
  document.getElementById("option1").label = inputText;
  console.log(inputText);
  selectField.value = "1";
  selectField.value = "2";
  selectField.value = "1";
}

<select id="select1">
            <option id="option1" value="1">Option 1</option>
            <option id="option2" value="2">Option 2</option>
            <option id="option3" value="3">Option 3</option>
        </select>
<input id="field1" oninput="setLabel()" \>

IE 11无法在选择元素

1 个答案: