在 iOS 6.x (iPad) 上使用 JS 选择/取消选择下拉选项 [英] Select / deselect dropdown option with JS on iOS 6.x (iPad)
问题描述
我正在使用 html <select> 标签创建动态 drodown，其属性为 multiple 并且默认选择第一个选项:
I'm creating dynamic drodown using html <select> tag with attribute multiple and first option selected by default:
<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 选项.
User taps option One for instance and then supposed behaviour is to deselect the All option and select the One option.
当 iPad 浏览器为下拉菜单打开本机 UI 时，我能够从下拉控件中捕获触摸事件(来自我的插件的代码片段):
When iPad browser open native UI for dropdown I am able to catch touch events from dropdown control (code snippets from my plugin):
this.$el.on('change', this.selectOption, this);
并通过以下方式操作选项以取消选择它们:
and manipulate options to deselect them in the way below:
selectOption: function(e){
var opts = element.find('option');
opts.each(function(idx, opt){
$(opt).prop('selected', false);
});
}
问题
选项属性已正确设置为 false 但在 iPad 的下拉 UI 中，所选选项的视觉效果保持不变 - 这可能会使用户感到困惑.
在点击下拉列表中的完成按钮后，UI 中的更改会应用.下一次打开显示取消选择的所有选项，这很好，但有点晚了;-)
The problem
Option properties are set to false properly BUT visually in iPad's dropdown UI selected options remain unchanged - which may confuse user.
The changes in UI are applied after Done button in dropdown is tapped. Next opening shows all options deselected which is OK but little bit late ;-).
是否可以通过用户点击一个选项而另一个在原生 iPad 下拉菜单中实时取消选择的方式来选择/取消选择选项?
Is this possible to select/deselect options in the way where user taps one option and the other one is being deseleted realtime in native iPad dropdown?
推荐答案
当我们在 IOS 中触发 时，它将使用它自己的内部浏览器控件，这超出了我们的设计能力.
When we trigger a <select> in IOS it will use it's own internal browser control, beyond our ability to style.
它尊重 multiple="true" 属性并采取相应的行动.
It respects the multiple="true" attribute and acts accordingly.
这个问题等同于问:当我点击我的网页按钮时，如何让我的浏览器工具栏变成蓝色"
从问题中不清楚为什么
- 您设置了
mutliple="true" - 然后设置
size=1 - 然后尝试使用 javascript 使其表现得像单个
select，只允许一个选择.
- You set
mutliple="true" - Then set the
size=1 - Then try to make it behave like a single
selectwith javascript, only allowing one select.
<小时>
我怀疑您真正需要的只是删除 multiple = "true" 属性并可能增加大小(如果您希望所有选项可见)
I suspect that all you actually need is to remove the multiple = "true" attribute and maybe increase the size ( if you want all options visible )
<select size="3">
<option value="" selected="selected">All</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
然后原生 iOS 控件可以随心所欲.
Then the native iOS controls can behave as you want.
对于所有其他解决方案，请考虑放弃选择(或隐藏它)并创建一个由 <ul><li> 或类似内容制成的自定义 javascript 控件，以填充幕后的价值观.
For all other solutions , look into ditching the select ( or hiding it ) and create a custom javascript control made from <ul><li>'s ,or similar, to populate the values behind the scenes.
这篇关于在 iOS 6.x (iPad) 上使用 JS 选择/取消选择下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
