Javascript 尽管设置了 HTMLOptionElement.label(但它在 Chrome 中有效)，iOS Safari 仍显示空白的

发布于09月03日

我在更新Options(DropDown)HTML元素的值时遇到困难.

我要做的是迭代数组中的几个下拉值，并更新de Value和Label:

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

for (var i = 0; i < answers.length; i++) {
    options[i + 1].value = answers[i];
    options[i + 1].label = answers[i];
    options[i + 1].selected = false;
 }

<div>
<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>
</div>

但在代码运行后，下拉菜单如下所示:

有人知道怎么解决这个问题吗？显示的代码实际上可以在其他浏览器上运行.

———-

Safari DOM判断器显示<option>的label=""和value=""属性设置正确.好奇...

推荐答案

问题是(截至2022年9月)15.6之前的所有Safari版本都不在屏幕上显示HTMLOptionElement.label属性的文本.(这影响了both macOS Safari and iOS Safari，而Safari 15.6几周前才发布).

相反，只需将.label = answers[i]更改为.textContent = answers[i]，如下所示.
此外，您不需要在每个HTMLOptionElement上设置.selected = false，它的所有者<select>有<select multiple="multiple">(您不需要)，所以只需设置options[i].closest('select').selectedIndex = 0;就可以将 Select 重置为第一个<option>.

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

for (var i = 0; i < answers.length; i++) {
    const a = answers[i].toString();
    const o = options[i+1];

    o.value       = a;
    o.label       = a; // <-- Safari (prior to v15.6) ignores .label and uses .textContent instead, so set both properties.
    o.textContent = a;

    const select = o.closest('select');
    if( select && select.selectedIndex !== 0 ) select.selectedIndex = 0;
}

<div>
<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>
</div>

屏幕截图证明(应用修复后):

Chrome 105 on Windows	iPad Safari 15.1

Javascript相关问答推荐

Regex可以 Select 以任何顺序匹配组

将下拉分区与工具提示结合起来

导入图像与内联包含它们NextJS

Toast函数找不到其dis

如何在dataTables PDF输出中正确渲染字形？

我不明白这个react 组件有什么问题

在这种情况下，如何 for each 元素添加id？

JSDoc创建并从另一个文件导入类型

如何在Vue 3中创建自定义 Select 组件，并将选项作为HTML而不是props 传递？

如何将多维数组插入到另一个多维数组中？

在HTML语言中调用外部JavaScript文件中的函数

环境值在.js文件/Next.js中不起作用

OpenAI转录API错误请求

如何在Press上重新启动EXPO-AV视频？

第一项杀死下一项，直到数组长度在javascript中等于1

如何访问此数组中的值？

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态？

JWT Cookie安全性

Pevent触发material 用户界面数据网格中的自动保存

我怎样才能得到一个数组的名字在另一个数组？

实用课程推荐