防止多选框在移动浏览器上的多选框中不更改

Posted

技术标签:

【中文标题】防止多选框在移动浏览器上的多选框中不更改【英文标题】:Prevent multi select box to not change in multi check box on mobile browser 【发布时间】:2019-12-16 03:18:47 【问题描述】:

如何防止多选框不将移动浏览器上的视图更改为复选框?

已经尝试过 data-role="none" 属性,但不起作用。

  <select multiple="multiple" data-role="none">
        <option value="USD">US Dollar</option>
        <option value="EUR">Euro</option>
        <option value="GBP">British Pound Sterling</option>
  </select>

目前此移动浏览器多选框的输出显示在复选框中,我希望将其作为移动浏览器中多选框的默认视图。

【问题讨论】:

【参考方案1】:

没有data-role="none",但是可以使用data属性:data-native-menu="false".

来自docs:“当设置为true时,单击自定义样式的选择菜单将打开最适合性能的原生选择菜单。如果设置为false,自定义选择菜单样式将为用于代替原生菜单。”

<select multiple="multiple" data-native-menu="false">
  <option value="USD">US Dollar</option>
  <option value="EUR">Euro</option>
  <option value="GBP">British Pound Sterling</option>
</select>

【讨论】:

以上是关于防止多选框在移动浏览器上的多选框中不更改的主要内容,如果未能解决你的问题,请参考以下文章

vue添加第一行为空的多选框

及时从数据库中取得数据填放进Form表单的多选框中

elementUI多选框的其他样式

下拉框多选框单选框 通过TagHelper绑定数据

如何避免使用 Javascript 在多选框中进行 ctrl-click 的需要?

jqGrid 多选 - 仅使用复选框限制行的选择