在 iOS 6.x (iPad) 上使用 JS 选择/取消选择下拉选项

我正在使用 html 创建动态下拉列表<select>带属性的标签multiple默认选择第一个选项：

<select multiple="multiple" size="1">  
    <option value="" selected="selected">All</option>  
    <option value="1">One</option>  
    <option value="2">Two</option>  
</select>

用户点击选项One例如，然后假设的行为是取消选择All选项并选择One选项。

当 iPad 浏览器打开下拉菜单的本机 UI 时，我能够从下拉控件捕获触摸事件（来自我的插件的代码片段）：

this.$el.on('change', this.selectOption, this);

并按以下方式操作选项以取消选择它们：

selectOption: function(e){
    var opts = element.find('option');  
    opts.each(function(idx, opt){  
        $(opt).prop('selected', false);  
    });  
}

问题

选项属性设置为false正确，但在 iPad 的下拉 UI 中视觉上选择的选项保持不变 - 这可能会让用户感到困惑。
UI 中的更改将在之后应用Done点击下拉菜单中的按钮。下一个打开显示所有选项均已取消选择，这还可以，但有点晚了;-)。

问题

是否可以通过用户点击一个选项而在本机 iPad 下拉列表中实时取消另一个选项的方式来选择/取消选择选项？

当我们触发一个<select>在IOS中，它将使用它自己的内部浏览器控件，超出了我们设置样式的能力。

它尊重multiple="true"属性并采取相应的行动。

这个问题相当于问：“当我单击网页按钮时，如何使浏览器工具栏变为蓝色”

从问题中尚不清楚为什么

1. You set mutliple="true"
2. 然后设置size=1
3. 然后尝试让它表现得像一个单一的select使用 JavaScript， 只允许一项选择。

我怀疑你真正需要的只是删除multiple = "true"属性并可能增加大小（如果您希望所有选项可见）

<select size="3">  
    <option value="" selected="selected">All</option>  
    <option value="1">One</option>  
    <option value="2">Two</option>  
</select>

然后本机 iOS 控件就可以按照您想要的方式运行。

对于所有其他解决方案，请考虑放弃选择（或隐藏它）并创建一个由<ul><li>或类似的方法来填充幕后的值。