IE 11不会更新“选择元素”中的所选“选项项目”标签

Question

我要做什么

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

我期待什么

随着所选选项元素的标签被更改， 选择元素上显示的文本也将更改。

实际发生了什么

IE 11忽略了option元素的标签被更改的事实。 直到选择元素再次选择选择元素上显示所选择的选项元素和相应的文字不会改变。

请参见下面的代码：

的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;
}

因此，将select元素保留在Option 1 ，在输入字段中输入文本。 在选择元素被选中之前， 选项元素不会更新其文本。

它可以在Chrome中按预期运行。 关于如何破解或提醒IE11更新的任何想法吗？

Answer 1

在IE11中测试-不是模拟器。 哇...这是骇客，但我认为它可以满足您的需求。 重新渲染需要控制台日志调用和从选定选项移回的多个更改。 几乎没有，标签有时仅落后一两次。

 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 个解决方案

解决方案1
0 2017-12-22 05:52:12

IE 11不会更新“选择元素”中的所选“选项项目”标签

问题描述

1 个解决方案

解决方案1 0 2017-12-22 05:52:12

解决方案1
0 2017-12-22 05:52:12