//select option bind title
$(document).delegate('select', 'mouseover', function()
{
var $this = $(this);
if($this.data('data-bind-title'))
{
return;
}
$this.data('data-bind-title', true).find('option').each(function()
{
var $option = $(this);
var _text = $.trim($option.text());
if(_text.length > 0 && !$option.attr('title'))
{
$option.attr('title', _text);
}
});
});
2、
<!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>
3、
select固定,但是option里的内容可能很长,在IE9下,option里的内容会被拉长变大,这个正常。
但是在IE6,7,8下,option里的内容都与select的宽度一致,对于的内容都被截断了。
现在有个解决办法,虽不能和IE9一模一样,但是相比效果还是差不多的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
return;
}
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.id="newSelectObj";
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
var newDiv = document.createElement("div");
with (newDiv.style)
{
position = "absolute";
top = (absTop-10) + "px";
left = (absLeft-10) + "px";
width = newSelectObj.offsetWidth+20;
height= newSelectObj.offsetHeight+20;;
background = "transparent";
//background = "green";
}
document.body.appendChild(newDiv);
newSelectObj.focus();
var enterSel="false";
var enter = function(){enterSel=enterSelect();};
newSelectObj.onmouseover = enter;
var leavDiv="false";
var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};
newDiv.onmouseleave = leave;
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
if(document.getElementById("newSelectObj") != null){
document.body.removeChild(newSelectObj);
}
}
function removeNewDiv(newDiv)
{
document.body.removeChild(newDiv);
}
function enterSelect(){
return "true";
}
function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){
if(enterSel == "true" ){
RollbackWidth(selectObj, newSelectObj);
removeNewDiv(newDiv);
}
}
</script>
</head>
<body>
<form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;" >
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
<option id="B" title="this is B">BBBBBBBBBBBBBBBssssssssssssssssss</option>
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>
</body>
</html>
参考:http://clocker321.blog.163.com/blog/static/6350577200982794537757/
4、jQuery解决IE 6/7/8 BUG:下拉框select设宽度时option超出显示不全(自动加宽select,但可能会暂时影响到布局)
jQuery(function($){
var el;
$("select").each(function() {
el = $(this);
el.data("origWidth", el.css("width"));
})
.focusin(function(){
el=$(this);
el.css("width", "auto");
//获取el.data("origWidth")的纯数字串
var orgWidth = (el.data("origWidth")).match(/\d+/ig);
if(el.width() < orgWidth){
el.css("width", el.data("origWidth"));
}
})
.bind("blur change ", function(){
el = $(this);
el.css("width", el.data("origWidth"));
});
});
5、span方法:
<span id="selectDiv" style="width:100px;overflow-x:hidden;">
<select id="select1">
<option >解决ie6中的问题,美工不行,不好意思。</option>
<option >假如有一天高速不收费多好啊,假如有一天动车票价和公交车票一样多好啊。</option>
</select>
</span>
这里的关键在overflow-x:hidden这个设置。查看w3c教程,里面是这样解释的:
overflow-x : visible | auto | hidden | scroll
visible:不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto:此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容
scroll:横向显示滚动条
这里并不限定select的width,那么select会根据option的长度自适应;然后限定外层span的width,那么当select的option长度超过span的width时,因为overflow-x设置为hidden,所以超出的部分就被隐藏了。
最关键的问题解决了,但是还有其它小麻烦:
进箱码头是个select,它的数据源是根据输入的船名动态加载的。当进箱码头外面的span设置为style="width:100px;overflow-x:hidden;"时,select的width就会根据加载的选项的长度动态调整,当加载的option长度大于100时没问题,但是如果小于100px,那么select的长度就会比标准的100px小,这样看起来就很不美观。解决方法如下:
首先设置select的宽度为固定的100px,然后在select中又添加了两个事件:
onmouseover="fixWidth()" onblur="setWidth()"
对应的方法是:
function fixWidth()
{
var len = document.getElementById('berth').options.length;
if( len != 0 ){
document.getElementById('berth').style.width = "auto";
}
}
function setWidth()
{
document.getElementById('berth').style.width = "100px" ;
}
当鼠标放在select上时就会将select的width设置为auto,这样就可以看到超过长度的部分;而当select失去焦点时,再将width设置为100px,这样就解决了以上问题。
当船名还没有输入时,如果鼠标一不小心滑到了select的上方,这个时候select的宽度就会变成0了,所以在fixWidth方法中要首先判断一下select中是否有option。同时要注意的是onblur事件是不能换成onmouseout的,如果换成此方法,会导致总是无法选中select中的option。
6、非jquery完美解决方案
开发过程中遇到这么一个问题有一个<select></select>的选择框,里面有个option的值很长大约128个字节,那么如果我不指定select的width时候,这个框就会很长,但是如果我限制了width那么这个option又显示不全,这个BUG仅仅会在IE中出现,如何解决呢,其实可以把select的下拉框用一个层覆盖掉,那个层会显示完整的数据,而select的widt指定好,这样整个页面的布局都不会被影响。所有的操作都通过JS实现,下面我就把代码贴出来。
function foo(px,py,pw,ph,baseElement,fid)
{
var win = document.getElementById(this.fid);
};
function dropdown_menu_hack(el)
{
// alert(el.options[el.selectedIndex].value);
if(el.runtimeStyle.behavior.toLowerCase()=="none"){return;}
el.runtimeStyle.behavior="none";
var ie5 = (document.namespaces==null);
el.ondblclick = function(e)
{
window.event.returnValue=false;
return false;
};
if(window.createPopup==null)
{
var fid = "dropdown_menu_hack_" + Date.parse(new Date());
window.createPopup = function()
{
if(window.createPopup.frameWindow==null)
{
el.insertAdjacentHTML("AfterEnd","<iframe id='"+fid+"' name='"+fid+"' src='about:blank' frameborder='1' scrolling='no'></></iframe>");
var f = document.frames[fid];
f.document.open();
f.document.write("<html><body></body></html>");
f.document.close();
f.fid = fid;
var fwin = document.getElementById(fid);
fwin.style.cssText="position:absolute;top:0;left:0;display:none;z-index:99999;";
f.show = function(px,py,pw,ph,baseElement)
{
py = py + baseElement.getBoundingClientRect().top + Math.max( document.body.scrollTop, document.documentElement.scrollTop) ;
px = px + baseElement.getBoundingClientRect().left + Math.max( document.body.scrollLeft, document.documentElement.scrollLeft) ;
fwin.style.width = pw + "px";
fwin.style.height = ph + "px";
fwin.style.posLeft =px ;
fwin.style.posTop = py ;
fwin.style.display="block";
};
f_hide = function(e)
{
if(window.event && window.event.srcElement && window.event.srcElement.tagName && window.event.srcElement.tagName.toLowerCase()=="select"){return true;}
fwin.style.display="none";
};
f.hide = f_hide;
document.attachEvent("onclick",f_hide);
document.attachEvent("onkeydown",f_hide);
}
return f;
};
}
function showMenu()
{
function selectMenu(obj,value)
{
var o = document.createElement("option");
o.value = value;
o.innerHTML = obj.innerHTML;
while(el.options.length>0){el.options[0].removeNode(true);}
el.appendChild(o);
el.title = value;
el.contentIndex = value ;
el.value=value;
//alert("===1"+value);
//alert("===2"+$("#dept").val());
el.menu.hide();
}
el.menu.show(0 , el.offsetHeight , 10, 10, el);
var mb = el.menu.document.body;
mb.style.cssText ="border:solid 1px black;margin:0;padding:0;overflow-y:auto;overflow-x:auto;background:white;text-aligbn:center;FONT-WEIGHT: normal;FONT-SIZE: 8pt;COLOR: #000000;FONT-FAMILY: Arial;TEXT-DECORATION: none";
var t = el.contentHTML;
t = t.replace(/<select/gi,'<ul');
t = t.replace(/<option/gi,'<li');
t = t.replace(/<\/option/gi,'</li');
t = t.replace(/<\/select/gi,'</ul');
mb.innerHTML = t;
el.select = mb.all.tags("ul")[0];
el.select.style.cssText="list-style:none;margin:0;padding:0;";
mb.options = el.select.getElementsByTagName("li");
//alert("3333"+mb.options.selected);
for(var i=0;i<mb.options.length;i++)
{
mb.options[i].selectedIndex = i;
mb.options[i].style.cssText = "list-style:none;margin:0;padding:1px 2px;width/**/:100%;cursor:hand;cursorointer;white-space:nowrap;FONT-WEIGHT: normal;FONT-SIZE: 8pt;COLOR: #000000;FONT-FAMILY: Arial;TEXT-DECORATION: none";
mb.options[i].title =mb.options[i].innerHTML;
mb.options[i].innerHTML =mb.options[i].innerHTML ;
mb.options[i].onmouseover = function()
{
if( mb.options.selected ){mb.options.selected.style.background="white";mb.options.selected.style.color="#000000";}
mb.options.selected = this;
this.style.background="#3399ff";this.style.color="white";
};
mb.options[i].onmouseout = function(){this.style.background="white";this.style.color="black";};
mb.options[i].onmousedown = function(){selectMenu(this,this.value);};
mb.options[i].onkeydown = function(){selectMenu(this,this.value);};
if(i == el.contentIndex)
{
mb.options[i].style.background="#3399ff";
mb.options[i].style.color="white";
mb.options.selected = mb.options[i];
}
}
var mw = Math.max( ( el.select.offsetWidth + 22 ), el.offsetWidth + 22 );
mw = Math.max( mw, ( mb.scrollWidth+22) );
var mh = mb.options.length * 15 + 8 ;
var mx = (ie5)?-3:0;
var my = el.offsetHeight -2;
var docH = document.documentElement.offsetHeight ;
var bottomH = docH - el.getBoundingClientRect().bottom ;
mh = Math.min(mh, Math.max(( docH - el.getBoundingClientRect().top - 50),100) );
if(( bottomH < mh) )
{
mh = Math.max( (bottomH - 12),10);
if( mh <100 )
{
my = -100 ;
}
mh = Math.max(mh,100);
}
self.focus();
el.menu.show( mx , my , mw, mh , el);
sync=null;
if(mb.options.selected)
{
mb.scrollTop = mb.options.selected.offsetTop;
}
window.onresize = function(){el.menu.hide()};
}
function switchMenu()
{
if(event.keyCode)
{
if(event.keyCode==40){ el.contentIndex++ ;}
else if(event.keyCode==38){ el.contentIndex--; }
}
else if(event.wheelDelta )
{
if (event.wheelDelta >= 120)
el.contentIndex++ ;
else if (event.wheelDelta <= -120)
el.contentIndex-- ;
}else{return true;}
if( el.contentIndex > (el.contentOptions.length-1) ){ el.contentIndex =0;}
else if (el.contentIndex<0){el.contentIndex = el.contentOptions.length-1 ;}
var o = document.createElement("option");
o.value = el.contentOptions[el.contentIndex].value;
o.innerHTML = el.contentOptions[el.contentIndex].text;
while(el.options.length>0){el.options[0].removeNode(true);}
el.appendChild(o);
el.title = o.innerHTML;
}
if(dropdown_menu_hack.menu ==null)
{
dropdown_menu_hack.menu = window.createPopup();
document.attachEvent("onkeydown",dropdown_menu_hack.menu.hide);
}
el.menu = dropdown_menu_hack.menu ;
el.contentOptions = new Array();
el.contentIndex = el.selectedIndex;
el.contentHTML = el.outerHTML;
for(var i=0;i<el.options.length;i++)
{
el.contentOptions [el.contentOptions.length] =
{
"value": el.options[i].value,
"text": el.options[i].innerHTML
};
if(!el.options[i].selected){el.options[i].removeNode(true);i--;};
}
el.onkeydown = switchMenu;
el.onclick = showMenu;
el.onmousewheel= switchMenu;
}
JS代码就是这些,在单击,下拉和鼠标滚轮操作时,响应相关的函数,在页面里面需要在需要这样用的元素中加入onfocus="window.dropdown_menu_hack(this)"这么一句就OK了,下面是代码,我用的struts2的标签,记得一定要用层将你要改的select包裹起来
<div id="pri">
<s:select name="deviceOwnedBy" id="deviceOwnedBy" list="deviceOwnedByList" listKey="value" listValue="value" headerKey="" headerValue="" cssClass="selectbox" style="width:150px;FONT-WEIGHT: normal;FONT-SIZE: 8pt;COLOR: #003399;FONT-FAMILY: Arial;TEXT-DECORATION: none" onfocus="window.dropdown_menu_hack(this)"></s:select>
</div>