select的标签

dd121011 2011-04-15 11:50:31

如果html页面的select标签过长。过长的部分会显示不出来，有没有把法可以把过长的部分给显示出来？<option> 上可以用mouse的相关属性吗？比如：鼠标放在option上，然后显示整个option的内容？有相关的例子发下。谢谢~js菜鸟求指教~~

...全文

306 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

yinjianjing 2011-04-18

打赏
举报

http://download.csdn.net/source/3196205 我想这个应该对你有所帮助

秋的红果实 2011-04-18

打赏
举报

用列表模拟

菊子 2011-04-16

打赏
举报

safari,chrome 下是不支持select-options的title属性的，即便支持，也不好看，建议采取其他的显示方式

smatiger 2011-04-15

打赏
举报

定义一个浮动层，给select添加onmouseover事件,在浮动层上显示option内容

Java 技术交流群：58156559

dd121011 2011-04-15

打赏
举报

[Quote=引用 1 楼 toury 的回复:]
用title属性
[/Quote]
恩。但是IE6不支持title属性啊。。所以。。有没有别的办法

toury 2011-04-15

打赏
举报

用title属性

toury 2011-04-15

打赏
举报



<HTML>

<HEAD>

<STYLE>

.tbl-container {

  position:relative; width:100px;overflow:hidden;margin:0px;

  font-Family:Verdana, Arial, Helvetica, sans-serif;

}

.smouseOut {

  background: document.bgColor;

  color: #000000;

}

.smouseOver {background:#0D60B3; color: #FFFFFF; cursor: pointer; }

.ctl{ table-layout:fixed ;top:0;}

.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}

</style>

<SCRIPT language="javascript">      

function opts(selectObj){

  if(Browser.ie6 == false){return; }

  var optDivs=document.createElement("div");

  optDivs.className="tbl-container";

  var objTable=document.createElement("table");

  var objTbody=document.createElement("tbody");

  optDivs.style.zIndex = "100";

  objTable.style.zIndex = "100";

  objTable.width=selectObj.style.width;    

  objTable.border = "0";

  objTable.cellSpacing = "0";

  objTable.cellPadding = "0";

  objTable.className = "ctl";     

  var e = selectObj;

  var absTop = e.offsetTop;

  var absLeft = e.offsetLeft;

  var absWidth = e.offsetWidth;

  var absHeight = e.offsetHeight;

                     

  while(e = e.offsetParent){

    absTop += (e.offsetTop+0.3);

    absLeft += e.offsetLeft;

  }

                         

  with (objTable.style){

    position = "absolute";

    top = 0;

    left = 0;

    border = "1px solid black";

    tableLayout="fixed";

    wordBreak="break-all";

  }

                        

  with (optDivs.style){

    position = "absolute";

    top = (absTop + absHeight) + "px";

    left = (absLeft+1) + "px";

    tableLayout="fixed";

    wordBreak="break-all";

    backgroundColor = document.bgColor;

  }

  var options = selectObj.options;

  var val=selectObj.value;

                     

  if (options.length > 0){

    for (var i = 0; i < options.length; i++){

      var newOptDiv = document.createElement("td");

      var objRow=document.createElement("tr");

      newOptDiv.name=options[i].value;

      newOptDiv.innerHTML=options[i].innerHTML;

      newOptDiv.title=options[i].title;

      newOptDiv.onmouseout = function() {this.className='smouseOut';val=selectObj.value};

      newOptDiv.onmouseover = function() {this.className='smouseOver';val=this.name;};

      newOptDiv.className="smouseOut";

      newOptDiv.style.width=1000;

      newOptDiv.style.cursor="default";

      newOptDiv.style.fontSize = "12px";

                                    

      objRow.appendChild(newOptDiv);

      objTbody.appendChild(objRow);

    }

  }

                     

  objTbody.appendChild(objRow);

  objTable.appendChild(objTbody);

  optDivs.appendChild(objTable);

  document.body.appendChild(optDivs);

                            

  if(objTable.offsetHeight > 120){

    optDivs.style.height = 120;

    optDivs.style.overflowY = "scroll";

  }else{

   optDivs.style.height = objTable.offsetHeight;

  }

                            

  var IfrRef = document.createElement("div");

  IfrRef.style.position="absolute";

  IfrRef.style.width = optDivs.offsetWidth;

  IfrRef.style.height = optDivs.offsetHeight;

  IfrRef.style.top = optDivs.style.top;

  IfrRef.style.left = optDivs.style.left;

  IfrRef.style.backgroundColor = document.bgColor;

  document.body.appendChild(IfrRef);

                        

  optDivs.focus();

  optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};

}



function choose(objselect,val,delobj,delobj2){

  objselect.value=val;

  document.body.removeChild(delobj);

  document.body.removeChild(delobj2);

}

          

Browser=(function(ua){

  var b={

    msie: /msie/.test(ua) && !/opera/.test(ua),

    opera: /opera/.test(ua),

    safari: /webkit/.test(ua) && !/chrome/.test(ua),

    firefox: /firefox/.test(ua),

    chrome: /chrome/.test(ua)

  };

  var vMark = "";

  for (var i in b) {

    if (b[i]) { vMark = "safari" == i ? "version" : i; break; }

  }

  b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";

  b.ie = b.msie;

  b.ie6 = b.msie && parseInt(b.version, 10) == 6;

  b.ie7 = b.msie && parseInt(b.version, 10) == 7;

  b.ie8 = b.msie && parseInt(b.version, 10) == 8;

  return b;

})(window.navigator.userAgent.toLowerCase());

</SCRIPT>

</HEAD>

<BODY>  



<select name='selId' size=1   style= 'width:100px' onclick="opts(this);" >

  <option value='0' title="000000000000000000000000000000000000">000000000000000000000000000000000000</option>

  <option value='1' title="111111111111111111111111111111111111111">111111111111111111111111111111111111111</option>

  <option value='2' title="222222222">222222222</option>

</select>

</BODY>

</HTML>

ajccom 2011-04-15

打赏
举报

自己模拟select吧

dd121011 2011-04-15

打赏
举报

[Quote=引用 3 楼 wsmalltiger 的回复:]
定义一个浮动层，给select添加onmouseover事件,在浮动层上显示option内容

Java 技术交流群：58156559
[/Quote]
select下拉列表的option里好像用不了onmouseover事件..

dd121011 2011-04-15

打赏
举报

[Quote=引用 6 楼 toury 的回复:]
引用 5 楼 dd121011 的回复:

引用 4 楼 theforever 的回复:
jq tip插件

求明示~

JQUERY框架里有个专做tip(类似title)的插件。你可以试试
[/Quote]
好像要求jqery1.3.2.我们用的版本比较低~~1.2.x..有没有别的办法。。

toury 2011-04-15