Question

我正在使用带有属性<select>的html multiple标记创建动态drodown，并默认选择第一个选项：

<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浏览器打开本机用户界面进行下拉菜单时，我能够从下拉控件（我的插件中的代码片段）中捕获触摸事件：

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更改。下一个打开显示取消选择的所有选项，但是有点迟;;）。

问题

这可以选择/取消选择用户点击一个选项的方式，而另一个选项是在原生iPad下拉列表中实时取消选择吗？

Answer 1

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

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

问题是等于询问：＆＃34;当我点击我的网页按钮时，如何让我的浏览器工具栏显示为蓝色＆＃34;

从问题原因不清楚

您设置了mutliple="true"
然后设置size=1
然后尝试使用javascript，使其表现得像一个select 只允许一个选择。

我怀疑您实际需要的只是移除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>或类似的自定义javascript控件来填充幕后的值。

使用iOS 6.x（iPad）上的JS选择/取消选择下拉选项

问题

问题

1 个答案: