iOS Safari设置HTMLOptionElement.label后<option>显示空白，如何解决？

问题现象 #

通过JavaScript设置<option>的value和label属性后，Chrome等浏览器能正常显示选项内容，但iOS Safari中选项显示空白，尽管DOM检查器显示属性已正确设置。

原因分析 #

iOS Safari的下拉选框渲染逻辑与桌面浏览器存在差异，它更依赖<option>的文本内容节点，而非label属性。仅设置label属性无法触发iOS Safari的渲染更新，导致选项显示空白。

解决方案 #

修改JavaScript代码，直接设置<option>的文本内容（textContent或innerHTML），同时保留value属性的设置：

修改后的JS代码 #

var options = document.getElementsByTagName('option');
var answers = [1,2,3]

for (var i = 0; i < answers.length; i++) {
    options[i + 1].value = answers[i];
    // 替换label属性设置为文本内容
    options[i + 1].textContent = answers[i];
    options[i + 1].selected = false;
}

补充说明 #

• 使用textContent比innerHTML更安全，可避免潜在的内容注入风险；
• 若需为辅助场景保留label属性，可在设置文本内容后额外添加options[i + 1].label = answers[i];，但核心必须设置文本内容以触发iOS Safari的渲染更新。

内容的提问来源于stack exchange，提问作者Ward Brink