IE 11 doesn't update selected Option Item label within Select Element
Question
What's I'm Trying To Do
Dynamically change the label of the selected option element within a select element on IE 11.
What I'm Expecting
As the label of the selected option element is being changed, the text shown on the select element changes as well.
What is Actually Happening
IE 11 ignores the fact that the option element 's label is being changed. The selected option element and corresponding text displayed on the select element will not change until the select element is selected again.
See the code below:
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;
}
So, keeping the select element on Option 1 , enter text into the input field . The option element won't update it's text until the select element is selected.
It works as expected in Chrome. Any idea on how to hack or alert IE11 of the update?
1 answers
solution1
0 2017-12-22 05:52:12
Tested in IE11 - not an emulator. Wow... This is this hacky, but I think it does what you need. The console log call and multiple changes away from and back to the selected option were necessary for the rerendering. Anything less and the label was sometimes a keystroke or two behind.
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()" \\>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.