HTML 下拉菜单未选择 iPhone 的 IOS 13 中的选项

Question

我实现了一个 Web 应用程序，它有一个下拉菜单（即 HTML Select）。如果我尝试 select 下拉列表中的任何选项，它不会触发更改事件，但会成功更新标签文本。

设备：iPhone11 或最新版本
OS: IOS 13 或最新版本
浏览器：Safari

示例代码：

<select id="storagetype">
    <option value="" selected>Select Storage Type</option>
    <option value="1" selected>ABC</option>
    <option value="2" selected>XYZ</option>
</select>

JavaScript:

var storagetype = document.getElementById("storagetype");

storagetype.addEventListener("change", function() {
    alert(storagetype.value)
});

如果我在 IOS 12.X 或更低版本中尝试相同，它会按预期工作。

此外，没有控制台错误，我尝试了 z-index 样式。但是没有任何效果。

Answer 1

在下面的代码中添加过滤器来检测 iphone 然后使用它。

Javascript:

 document.addEventListener('click', function (params) {
 document.querySelectorAll('li[id^="select-options"]').forEach(ele => {
 ele.addEventListener('touchend', (e) => {
 e.stopPropagation();
   })   
  }); 
});

Jquery:

$(document).click(function(){
  $('li[id^="select-options"]').on('touchend', function (e) {
    e.stopPropagation();
  }); 
});

HTML 下拉菜单未选择 iPhone 的 IOS 13 中的选项

HTML Drop Down not selecting options in iPhone's IOS 13

ios

html-select

onchange

ios13.3

iphone11