iOS Safari 未显示选择菜单的所有选项

Question

我在一个网站上有一个选择菜单，我正在使移动设备友好，它在桌面和 iOS 的 chrome 上完美运行，但在 iOS 的 safari 上它只显示选定的选项。它将滚动并可以选择其他选项，但它们是不可见的。

以下是问题的图片：

这就是它在 iOS 的 chrome 中显示时的样子：

问题似乎出在我用来调整选择菜单大小和重新对齐选择菜单的脚本上，具体取决于选择的选项。

<script>
var resized = false;

function resizeSelect(selected) {
if (resized) return;
var sel = document.getElementById('category');
for (var i=0; i<sel.options.length; i++) {
sel.options[i].title=sel.options[i].innerHTML;
if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
}
resized = true;
sel.blur();
}

function restoreSelect() {
if (!resized) return;
var sel = document.getElementById('category');
for (var i=0; i<sel.options.length; i++) {
sel.options[i].innerHTML=sel.options[i].title;
}  
resized = false;
}
</script>

HTML：

<form id="sortfilter" method="post" action="">
<select id="category" class="styled-select" name="category"  onchange="resizeSelect(this.selectedItem), form.submit()" onblur="resizeSelect(this.selectedItem)" onfocus="restoreSelect()">
<option value="All" selected>All</option>
<option value="Apparel">Apparel</option>
<option value="Boats">Boats</option>
<option value="Cars">Cars</option>
<option value="Food + Drink">Food + Drink</option>
</select>
</form>

关于问题可能是什么以及如何解决它的任何想法？

提前致谢。

编辑：由于某种原因，我现在在 iOS 版 chrome 上也遇到了同样的问题......非常感谢帮助。

Answer 1

我在 iOS 上特定版本的 Safari 上遇到了同样的问题。

以下 html 导致选取器在 iOS 中不显示选项标签。

<select>
  <option value="1" label="one"/>
  <option value="2" label="two"/>
  <option value="3" label="three"/>
</select>

当我以以下方式重写相同的html时正确显示。

<select>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

Answer 2

今天遇到了这个。根据我能找到的兼容性表，动态设置 label 属性足以让所有 iOS 版本显示控件标签。原来这取决于 iOS 版本。

显然你没有在 iOS 7-9 上设置 innerText，但 iOS 10 及更高版本需要设置 innerText 才能显示标签。

iOS 10+

let option = document.createElement('option');
// option.innerText required on iOS 10 and up.
option.label = option.innerText = 'My option label';
option.value = '123';

iOS 7-9

var option = document.createElement('option');
// option.innerText not required on iOS 7-9.
option.label = 'My option label';
option.value = '123';

当然请注意，let 关键字在 iOS 10 之前不可用。