关于<option></option>标签的title属性问题

最新推荐文章于 2022-08-22 14:58:40 发布
最新推荐文章于 2022-08-22 14:58:40 发布
阅读量689 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： 浏览器 Java HTML 工作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dq201/article/details/83735002
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script>
  //由于<option></option>标签的title属性在有些浏览器上不能够正常工作，
  //因此我们找了一个解决方法（在<select></select>标签上做文章，具体方法如下:）
  </script>
 </HEAD>
 <BODY>
<select id='yy' name=mysel onchange="document.getElementById('yy').title=this.options[this.selectedIndex].text;"> 
<option value=title1 title='1'>new1 </option>
<option value=title2 title='2'>new2 </option>
<option value=title3 title='3'>new3 </option>
<option value=title4 title='4'>new4 </option>
</select>
 </BODY>
</HTML>
dq201
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
慎用option中的title属性，及其替代方法
07-06 9213
如下图所示的多选框列表，要是鼠标点击某个条例时，显式该条例的详细内容。在页面中加了一个div，当鼠标移动时通过onmousemove="selMouseOver(this)"，来设置并显式div的值。在IE6中没有问题，鼠标点击后，显式条例的具体内容；IE7和8，当鼠标移动时，就显式条例的具体内容，点击后，又显式了一遍，重复了。将onmousemove="selMouseOver(this)"去掉后，IE7和8竟然还能显式。原因就在：在option中设置了title属性，当鼠标放在下拉框中的某一行时，可以显
echarts-option属性title详解
青9的blog
12-14 1753
echarts
echarts中option的title
tumi
07-09 2892
echarts中option的title参数配置如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;标题&lt;/title&gt; &lt;/head&gt; &lt;body&a
echarts 动态展示title以及动态展示tooltip
weixin_48969871的博客
08-22 4997
echarts 切换图例动态展示title，及tooltip自定义
js如何获取选中option的title值
hiboshi的专栏
05-03 2139
this.options[this.selectedIndex].title
JS更改select内option属性的方法
11-24
每个`<option>`都有自己的`value`和`title`属性，用于存储不同的值和提示信息。 ```html <select id='SHGX'> <option value='111' title='夫'>夫</option> ... </select> ``` 在这个例子中，`detail()`函数用于...
IE6/7/8中Option元素未设value时Select将获取空字符串
12-12
<option>one</option> <option>two</option> <option>three</option> </select> </body> </html> 当触发change事件时，各浏览器中测试结果如下：IE6/7/8 : 弹出空字符串IE9/Firefox/Safari/C
javascript各浏览器中option元素的表现差异
12-04
JavaScript在不同浏览器中处理`<option>`元素时存在一些显著的行为差异，这主要涉及事件处理、事件源获取以及特定属性的兼容性问题。下面将详细解释这些差异。 1. **事件支持**： - Internet Explorer (IE) 6、7、...
Firefox中A元素包含Select时点击Select不能选择option bug
01-19
这是在使用京东的一个日期组件时碰到的bug，重现bug的代码精简... <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select></a> </body> </html> 代码很简单，元素
layui select获取自定义属性方法
01-19
<option xss=removed>请选择属性</option> <option value=1 title=12.32>雪碧</option> <option value=2 title=2.01>芬达</option> <option value=3 title=34.51>冰糖雪梨</option> <option value=4 title=17.46>...
HTML5中对title属性的定义与规定
11-23
注意，这里说的不是title标签（<title></title>），而是title属性(如 <a title=”…) 总结： 元素的title属性的值就是该元素的咨询信息，并有可能适当的以提示框的形式显示出来。 title属性是纯文本形式的。 例如:超级连接的（<a>标签）title属性可以设置成目标资源的简单描述 示例： 代码: 全选 运行
title失效问题（select 中option过长）
april_4的博客
10-24 2003
写告警过滤这个功能，哎呀，告警描述太长了，导致select里面的option显示过长，其实这个问题的本质就是告警描述不应该过长。。。。但是推动改成个中文真是困难重重，时 间又来不及，只能是在select中用style="word-break: break-word断句，但是又发现火狐不支持。。。。 再改，加个title属性？发现之前就遇到的一个问题，title总是显示空格前的第一个单词，网上说
（13）＜datalist＞ 标签
Java田根旺
11-19 5443
一、<datalist>标签的作用 <datalist> 标签规定了<input> 元素可能的选项列表。 <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。 绑定的<input>标签必须设置list 属性，属性值等于<datalist>标签的id 属性值。 二、<datalist>标签
HTML网页设计期末考试题库,网页设计题库含参考 答案.doc
weixin_35651191的博客
06-05 5114
网页设计题库(含参考答案)第1题 判断正误HTML标记符的属性一般不区分大小写HTML标记符通常不区分大小写，但标记符属性区分大小写。(错)网站就是一个链接的页面集合。将网页上传到Internet时通常采用FTP方式。所有的HTML标记符都包括开始标记符和结束标记符。(错)可以用文本编辑器编辑HTML文件。文本编辑器和HTML编辑器软件都可以用来编辑HTML文件。TITLE 标记符通常位于BODY...
jQuery动态为Layui的option加title
热门推荐
Ambitiouss的博客
05-07 1万+
动态为Layui的下拉框添加提示: 直接贴代码吧… html <div class="layui-form lable-seach-box" lay-filter="set-up-font"> <select class="pie-drop-down drop-down" lay-verify="allowanceType"> <opti...
【开发小技巧】01-如何使用JavaScript删除CSS属性？
web前端开发
05-03 415
方法1：使用CSS removeProperty：该CSSStyleDeclaration.removeProperty（）方法被用来从一个元件的样式删除一个属性。通过遍历styleSh...
html title属性无效_Bleach：Mozilla 出品，快速准确地清理 HTML
weixin_32308019的博客
12-27 718
【导语】：Bleach 是 Mozilla 官方开发的 HTML 清理库，用 Python 实现。它使用简单，能够快速准确地清理文本中的 HTML 片段，还能提取出其中的链接，通过点击链接，你就能安全地查阅对应的内容。简介在日常的工作中，你是否碰到过带有 HTML 片段的内容，比如博客上的用户评论，或者商品的描述信息？在处理这些内容时，你是否因其中包含的无效标记，不完整标签以及不安全链接而困扰？如...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
最新发布
05-27
<title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值