4

我正在使用<select>带有属性的 html 标签创建动态下拉菜单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 中的更改。下一次打开显示所有取消选择的选项，这没关系，但有点晚了;-)。

问题

这是否可以以用户点击一个选项而另一个在本机 iPad 下拉菜单中实时删除的方式来选择/取消选择选项？

4

1 回答 1

1

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

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

这个问题相当于问：“当我点击我的网页按钮时，我怎样才能让我的浏览器工具栏变成蓝色”

从问题中不清楚为什么

  1. 你设置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 控件可以随心所欲地运行。

对于所有其他解决方案，请考虑放弃选择（或隐藏它）并创建一个由 's 或类似物制成的自定义 javascript 控件<ul><li>，以填充幕后的值。

于 2014-03-02T16:54:36.277 回答