iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

  网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种:

  安卓版的浏览器则没有这个问题。

  如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢?答案是使用<optgroup></optgroup>标签。有关optgroup标签的作用可以查看w3school网站的说明。

  正常select下拉列表的html是这样:

<select id="sel_model" class="form-control">
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>
<
option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>
<
option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>
<
option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>
<
option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option> </select>

  加入optgroup标签之后的html是这样:

<select id="sel_model" class="form-control">
<optgroup>
<option value="">请选择车型</option>
<option value="5a38a7cae794ff021d4e9eab">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9eac">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 进取型</option>
<option value="5a38a7cae794ff021d4e9ead">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eae">2018款 奥迪A3 30周年年型 Limousine 35 TFSI 时尚型</option>
<option value="5a38a7cae794ff021d4e9eaf">2018款 奥迪A3 30周年年型 Sportback 35 TFSI 运动型</option>
</optgroup>
</select>    

  然后iOS的Safari浏览器上显示效果如下:

  iOS会根据select下拉列表中的内容长度自动缩小字体,以保证所有内容能在一行显示出来。尽管在HTML中加入了optgroup标签,但通过JQuery获取select选中值的方法不受任何影响。例如我们仍然可以通过$('#sel_model').val()来获取下拉列表的选中值。

  optgroup是一个很神奇的标签!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369815.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Servlet 开发

1. Servlet &#xff08;很久远的东西&#xff0c;但是现在学习原理&#xff09; html css js 前端页面&#xff08;静态的&#xff09; form action ".html" Servlet 允许将action属性设置为映射&#xff0c;通过映射找到相关的Servlet class 进行数据的处理。…

CentOS 7 Flannel的安装与配置

1. 安装前的准备 etcd 3.2.9 Docker 17.12.0-ce 三台机器10.100.97.236, 10.100.97.92, 10.100.97.81 etcd不同版本之间的差别还是挺大的&#xff0c;使用V3版本跟Flannel整合起来会有坑&#xff0c;下文详解。 2. 安装 sudo yum install -y flannel 安装后&#xff0c;版本是0…

给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解)...

不多说&#xff0c;直接上干货&#xff01; Impala和Hive的关系&#xff08;详解&#xff09; 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤&#xff08;图文详解&#xff09; 参考 hortonworks ambari集成impala ambari hdp 集成 imp…

html中常见的小问题(1)

问题&#xff1a;自适应高度的块级元素内添加图片后&#xff0c;其高度会比图片高度多出一块 简单代码如下&#xff1a; <!doctype html> <html><head><style>.box{width:533px;margin:100px auto;border:1px solid red;}</style></head>…

JmeterAnt构建自动化测试平台

一、jmeter jmeter下载地址为&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 下载完成后&#xff0c;解压文件&#xff0c; 加压后&#xff0c;到biin目录下&#xff0c;点击jmeter.bat启动jmeter(如果是linux环境&#xff0c;给jmeter.sh可执行的权限&#xff0c;…

input复选框checkbox默认样式纯css修改

修改之前的样式 修改之后的样式 html <input type"checkbox" name"btn" id"btn1"><label for"btn1">按钮1</label> css input[type"checkbox"]{width:20px;height:20px;display: inline-block;text-al…

c++word书签_「职场必备」干货!WORD办公软件快捷键,小编整理拿走不谢

小编工作时的照片&#xff0c;不上镜CtrlShiftSpacebar创建不间断空格Ctrl -(连字符)创建不间断连字符CtrlB使字符变为粗体CtrlI使字符变为斜体CtrlU为字符添加下划线CtrlShift缩小字号CtrlShift>增大字号CtrlQ删除段落格式CtrlSpacebar删除字符格式CtrlC复制所选文本或对象…

前端学习---css基本知识

css基本知识 我们先看一个小例子&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div style"background-color:#2459a2;height:…

mysql 从库_mysql数据库主从配置

在一篇文章《离线安装mysql数据库》,讲解了离线安装mysql数据库的过程&#xff0c;本文将讲解mysql数据库的主从配置方法。mysql数据库进行主从配置后&#xff0c;可以实现数据库的备份、同时应用也可以实现读写分离&#xff0c;提高应用的并发量。1、主从原理从《高性能mysql》…

前端学习---html基础知识

HTML基本知识 学习html首先我们先看看HTML本质&#xff1a; web框架本质 我们在学socket&#xff0c;我们创建一个socketserver&#xff0c;然后运行起来&#xff0c;有一个client客户端要连接socket服务端&#xff0c;连接上之后&#xff0c;如果两边都没有close&#xff0…

前端:css

一,css介绍 CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;它就会按照这个样式表来对文档进行格式化&#xff08;渲染&#xff09;。 二,CSS语法 1,每个CSS样式由两个组成部分&#xff1a;选择器…

爬虫框架:scrapy

阅读目录 一 背景知识二 同步、异步、回调机制三 高性能一 背景知识 爬虫的本质就是一个socket客户端与服务端的通信过程&#xff0c;如果我们有多个url待爬取&#xff0c;采用串行的方式执行&#xff0c;只能等待爬取一个结束后才能继续下一个&#xff0c;效率会非常低。 需要…

为Openshift + MongoDb应用程序编写验收测试

验收测试用于确定是否满足规范要求。 它应该在与生产环境尽可能相似的环境中运行。 因此&#xff0c;如果您的应用程序已部署到Openshift中&#xff0c;则您将需要一个与生产环境中使用的帐户平行的帐户&#xff0c;以运行测试。 在这篇文章中&#xff0c;我们将为部署到Opensh…

CSS 自适应布局

前言 本篇文章将介页面布局中的自适应布局&#xff0c;常见的自适应布局有以下2种&#xff1a;左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案 说明&#xff1a;左列固定右列自适应&#xff0c;也可以为右列固定左列自适应&#xff0c;常见于中…

mysql的表导出er关系图_使用Navicat生成ER关系图并导出的方法

平时管理数据库一般都是用cmd命令提示符&#xff0c;或是IDEA Intellij自带的Data source&#xff0c;使用Navicat比较少。这段时间&#xff0c;由于要对前后端交互的数据结构进行设计&#xff0c;直接写文档联系多表时有些困难&#xff0c;想着如果有关系图就直观很多。想到Na…

Scude导入MySQL_FM2017_FMF赛季更新和真实修正数据库[更新至9.9,超过89000个更新]

FM2017_FMF赛季更新和真实修正数据库[更新至9.9&#xff0c;超过89000个更新]FM2017_FMF赛季更新和真实修正数据库[更新至9.9&#xff0c;超过89000个更新](2)这是国外玩家制作的一款FM2017_FMF冬季更新和真实修正数据库&#xff0c;更新至9月9日&#xff0c;超过89000个更新内…

音视频和表单的详情

网页中的音视频 <audio> 和 <vedio> 标签属性&#xff1a;autoplay 自动播放 controls 控制播放 loop 循环播放 表单 HTML 表单用于收集用户输入。 标签<form> 标签属性 action 数据的路径 enctype 传输文件 enctype"multipart/form-data" method …

mysql otter 数据同步_MySQL数据同步之otter

一、otter介绍基于日志数据&#xff0c;用于MySQL或者ORACLE之间准实时同步数据。用途&#xff1a;mysql/oracle互相同步中间表/行记录同步二、原理及架构图otter整体模块manager (提供web页面进行同步管理)arbitrate (分布式调度&#xff0c;可跨IDC机房)node (同步过程setl)c…

ubuntu中获取文件名称并生成txt文件

简介&#xff1a; 在机器视觉学习过程中&#xff0c;通常会经常批量处理一些图片&#xff0c;在&#xff35;&#xff42;&#xff55;&#xff4e;&#xff54;&#xff55;下可以使用find命令&#xff0c;来实现将文件名全部读取出来&#xff0c;生成列表txt文件&#xff0c;…

HTMLCSS

HTML xml &#xff08;标签名&#xff09;可扩展标记语言 <Stu> </Stu> Html 超文本标记语言&#xff08;文本&#xff0c;图片&#xff0c;链接&#xff09; <> </> Internet网上编写页面&#xff08;H5版本&#xff1a;支持多种标签特性&…