IE 11 不更新选择元素中的选定选项标签答案

【问题标题】：IE 11 doesn't update selected Option Item label within Select ElementIE 11 不更新选择元素中的选定选项标签
【发布时间】：2023-03-23 10:55:02
【问题描述】：

我要做什么

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

我的期望

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

实际发生了什么

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

请看下面的代码：

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 上，在输入字段 中输入文本。 option 元素 在选择 select 元素 之前不会更新它的文本。

它在 Chrome 中按预期工作。关于如何破解或提醒 IE11 更新的任何想法？

【问题讨论】：

虽然目前并不紧急（对我而言），但一个全面的解决方案（如果存在）会很有用。（仍在寻找答案）

标签： javascript html internet-explorer

【解决方案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()" \>

【讨论】：

这对我来说一直是延迟或落后的。我输入“1”“2”“3”“4”显示为“”“12”“12”“1234”。虽然非常接近！我要多做一点实验。每隔一个字符就会触发重新渲染。
这很令人沮丧，我也看到了，但是添加了一些垃圾代码之后就可以了。我知道这听起来有多糟糕，但是您是否尝试添加更多“不必要的”调用来切换选项或更多控制台日志条目以尝试让渲染引擎有时间赶上？
只是为了澄清 - 这不是一个好的编码方式。我的生产团队解决方案是使用 select2、selectize、jqueryui 或自定义解决方案，它是一个输入和一个列表，其样式看起来和行为都像一个选择 - 如果基于客户端流量分析数据可以接受，则完全忘记 IE。 *免责声明
此时我完全忘记了 IE。我认为您的解决方案将取决于客户端机器的工作速度（或慢，更确切地说）。此时，制作自定义选择元素处于低优先级功能中，因为显示的项目根据操作系统的不同而不同（无法可靠地设置它们的样式）。我最终遇到了 IE11 的其他问题，因此 Edge 在这一点上是最小的。不过谢谢！
你打赌。你应该考虑关闭这个问题，因为没有真正的解决方案。