鼠标经过select option 时，能否把option里的内容以提示形式显示出来

xwt799023 2010-09-20 02:18:42
1,鼠标经过select option 时，能否把option里的内容以提示形式显示出来
2，水平滚动条能否出现
<select style="width:100px;">
<option >这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字</option>
<option>2222222222222222222222</option>
</select>
...全文
1312 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
ansenxl 2010-09-22
  • 打赏
  • 举报
 回复
过页了。帮顶一下。解决了没？
ma2jiajia 2010-09-21
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 xwt799023 的回复:]
引用 1 楼 ma2jiajia 的回复:
option可以加TITLE属性，不过IE6下无效
IE6下可以使用DIV来模拟

与其出现水平滚动条，不如让它用TITLE的形式弹出内容，TITLE会自动换行的

IE6下模拟OPTION可看看这里
http://www.cnblogs.com/wblade/archive/2010/02/23/1671693.html


你的这……
[/Quote]
在模拟的DIV层上加一层大小一致，或者稍大一点的iframe
var oifr = document.createElement("IFRAME");

oifr.src = "javascript:'<html></html>';";

oifr.scrolling = "no";

oifr.frameborder = "0";

oifr.style.cssText = "position:absolute;width:50px;height:120px;top:0px;left:0px;border:none;display:block;"

document.body.appendChild(oifr);

用上面的代码创建一个iframe来遮挡其余的SELECT，width、height、top和left和模拟出来的DIV一致
还有就是，上面这个iframe必须先于DIV添加到文档中，也就是必须先document.body.appendChild(oifr);之后再document.body.appendChild(odiv);

上面创建iframe的详细细节可参考
http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx(这就是做笔记时有保留原出处的好处，顺便强烈BS下那些转贴老是写个转贴，却从来不帖原出处的，更强烈的BS明明是转贴，还说是原创...)
hoojo 2010-09-20
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 xwt799023 的回复:]

引用 1 楼 ma2jiajia 的回复:
option可以加TITLE属性，不过IE6下无效
IE6下可以使用DIV来模拟

与其出现水平滚动条，不如让它用TITLE的形式弹出内容，TITLE会自动换行的

IE6下模拟OPTION可看看这里
http://www.cnblogs.com/wblade/archive/2010/02/23/1671693.html


你的……
[/Quote]

好像是通病，select在css布局就有这个问题，设置psition:absolute;z-index:9999;看看
xwt799023 2010-09-20
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 ma2jiajia 的回复:]
option可以加TITLE属性，不过IE6下无效
IE6下可以使用DIV来模拟

与其出现水平滚动条，不如让它用TITLE的形式弹出内容，TITLE会自动换行的

IE6下模拟OPTION可看看这里
http://www.cnblogs.com/wblade/archive/2010/02/23/1671693.html
[/Quote]

你的这个我试了，IE7,IE8都可以，但在ie6下也行，只是被其他的下拉框给遮住了，请问如何改呢
happy664618843 2010-09-20
  • 打赏
  • 举报
 回复
BooJS 2010-09-20
  • 打赏
  • 举报
 回复
最好的方法还是自己用div模拟下拉框吧，很多这种东西，随便一搜。
ma2jiajia 2010-09-20
  • 打赏
  • 举报
 回复 
window.onload = function() {

  var os = document.getElementsByTagName("SELECT")[0].options;

  for(var i=0; i<os.length; i++) os[i].title = os[i].innerHTML;

};

如果上面的 HTML 代码是后台生成的，那直接
<option title="4444444444">4444444444</option>
就不需要再去用js来实现了...
ma2jiajia 2010-09-20
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 funfun5433 的回复:]
HTML code

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<div STYLE='width:200;overflow-x:scroll;border:1px solid red'>
<select name=selectResult align=……
[/Quote]
(—_—b

不是说了，加TITLE属性啊

<HTML>  

 <HEAD>  

  <TITLE> New Document </TITLE>  

  <script type="text/javascript" language="javascript">

    window.onload = function() {

      var os = document.getElementsByTagName("SELECT")[0].options;

      for(var i=0; i<os.length; i++) os[i].title = os[i].innerHTML;

    };  </script>

  </HEAD>  

  

 <BODY>  

  <div STYLE='width:200;overflow-x:scroll;border:1px solid red'>  

  <select  name=selectResult align=bottom size=1 STYLE='margin=-2;width:300' multiple >"  

<option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option>  

 <option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option> 

<option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option> 

  </select>  

  </div>  

 </BODY>  

  

  

</HTML>
funfun5433 2010-09-20
  • 打赏
  • 举报
 回复 


<HTML>  

 <HEAD>  

  <TITLE> New Document </TITLE>  

  </HEAD>  

  

 <BODY>  

  <div STYLE='width:200;overflow-x:scroll;border:1px solid red'>  

  <select  name=selectResult align=bottom size=1 STYLE='margin=-2;width:300' multiple >"  

<option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option>  

 <option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option> 

<option>111111111111111111111111111111111111111</option>  

<option>222222222222222222222222222222222222222</option>  

<option>333333333333333333333333333333333333333</option>  

<option>444444444444444444444444444444444444444</option> 

  </select>  

  </div>  

 </BODY>  

  

  

</HTML>


第一条貌似不行吧？？ 用onmouseover不能达到鼠标经过提示的效果
kyzy_yy_pm 2010-09-20
  • 打赏
  • 举报
 回复
那么多个option选项楼主要想怎么显示呢？
ma2jiajia 2010-09-20
  • 打赏
  • 举报
 回复
option可以加TITLE属性，不过IE6下无效
IE6下可以使用DIV来模拟

与其出现水平滚动条，不如让它用TITLE的形式弹出内容，TITLE会自动换行的

IE6下模拟OPTION可看看这里
http://www.cnblogs.com/wblade/archive/2010/02/23/1671693.html
## el-select option内鼠标悬浮文字提示
el-select option内鼠标悬浮文字提示 前置条件 option固定宽度而内容...主要 ：:title=“item.text” 鼠标悬浮在option时提示内容 <el-option v-for="item in option" :key="item.value" :label="item.text
解决select option文字过长出现...鼠标悬停时显示所有
【代码】解决select option文字过长出现...鼠标悬停时显示所有。
select 鼠标悬浮 option 内容全部显示
ie7，ie8的select有title属性，可以用它来显示。 window.onload = function() {  var os = document.getElementById("illegaName").options;  for(var i=0; i  os[i].title = os[i].innerHTML;  }  };
iview-select 鼠标移入option，显示对应操作
Select v-model="selectObj" filterable clearable style="width: 300px;" > <OptionGroup label="--- 测试1 ---"> <Option v-for="item in selectOptions1" :value="item.value
ant-design-vue a-select-option显示全部内容
<a-select> <a-select-option v-for=" item in list" ... :title="item.label" // 鼠标移到此项，显示title内容 > {{ item.label }} </a-select-option> </a-select> ...
JavaScript

87,992

社区成员

224,698

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章