IE 11不会更新选择元素中选定的选项项标签
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE 11不会更新选择元素中选定的选项项标签相关的知识，希望对你有一定的参考价值。
我正在尝试做什么
动态更改IE 11上select元素中所选选项元素的标签。
我期待的是什么
当正在更改所选选项元素的标签时，select元素上显示的文本也会更改。
什么是实际发生的事
IE 11忽略了选项元素标签被更改的事实。在再次选择select元素之前，select元素上显示的选定选项元素和相应文本不会更改。
请参阅以下代码：
<!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>
function setLabel() {
var text = document.getElementById("field1").value;
document.getElementById("option1").label = text;
}
因此，将select元素保留在Option 1上，在输入字段中输入文本。在选择select元素之前，option元素不会更新它的文本。
它在Chrome中按预期工作。有关如何破解或提醒IE11更新的任何想法？
答案
在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不会更新选择元素中选定的选项项标签的主要内容，如果未能解决你的问题，请参考以下文章
如何让自定义标签栏显示标签栏项目在 Xcode 中设置的选定图像？