字体：大中小

option设置title属性

经验与学习　2010/5/21 15:38:59　　点击：不统计

原载于:转www.载for网站制作学习asp必.cn究

关键词：option title,option设置title，select下的option设置title，option显示不全
为了布局的需要，下拉列表的宽度需要设成比较小的值，这时如果恰巧它包含的选择项的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，这就成了一个问题了。在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。但是在IE6中无法显示出<option>的title，为此特别写了一段js代码来解决在IE6下option的title显示问题

看optiton设置title效果例子：固定宽度下拉列表中option显示Title

看js代码：
<SCRIPT language="javascript">
function opts(selectObj){
if(Browser.ie6 == false){
return;
}
var ifm=document.createElement("<iframe id='ifmout' style='backgroundColor=transparent;position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'  frameborder='0'   ></iframe>");
var optDivs=document.createElement("div");
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-2;
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 = "13px";
   objRow.appendChild(newOptDiv);
   objTbody.appendChild(objRow);
   }
  }
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
document.body.appendChild(ifm);
if(objTable.offsetHeight > 200){
  optDivs.style.height = 200;
  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,ifm)};
  }
function choose(objselect,val,delobj,delobj2,delobj3){
  objselect.value=val;
  document.body.removeChild(delobj);
  document.body.removeChild(delobj2);
  document.body.removeChild(delobj3);
  }
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>

原理，js新建一个div层，模拟下拉框，从而显示出option的title
代码的这部分ifm=document.createElement("<iframe id='ifmout' style='backgroundColor=transparent;position:absolute;z-index:0;width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);top:expression(this.nextSibling.offsetTop);left:expression(this.nextSibling.offsetLeft);'  frameborder='0'   ></iframe>");是为了解决当页面中还有另一个select下拉菜单的时候避免这个select下拉菜单覆盖住新建的div层，因为select的级别比div的级别高，但是iframe的级别又比select的高，所以就在新建的div层的外面又建了一个iframe框架，来解决这个覆盖问题

看例子：固定宽度下拉列表中option内容显示不全问题解决方法

原载于:网f站o学a习s制p作.cn

·上一篇：mysql中sql时间不等于某年月 >> 　　　·下一篇：IE对页面资源的限制 >>