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

Question

我在网站上有一个选择菜单，我正在进行移动设备友好，它在桌面和Chrome上适用于iOS，但在iOS的safari上它只显示所选的选项。它将滚动并可以选择其他选项，但它们是不可见的。

以下是问题的图片：

这就是它应该是什么样子，因为它在Chrome的iOS中显示：

问题似乎在于我使用这个脚本调整大小并重新对齐选择菜单，具体取决于选择了哪个选项。

<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相同的问题...帮助将非常感激。

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 之前不可用。