select option 问题总结
//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);
}
});
});
New Document
但是在IE6,7,8下，option里的内容都与select的宽度一致，对于的内容都被截断了。
现在有个解决办法，虽不能和IE9一模一样，但是相比效果还是差不多的。
参考：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方法：
这里的关键在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中又添加了两个事件：
οnmοuseοver="fixWidth()" οnblur="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完美解决方案
开发过程中遇到这么一个问题有一个的选择框，里面有个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","");
var f = document.frames[fid];
f.document.open();
f.document.write("");
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(/
JS代码就是这些，在单击，下拉和鼠标滚轮操作时，响应相关的函数，在页面里面需要在需要这样用的元素中加入οnfοcus="window.dropdown_menu_hack(this)"这么一句就OK了，下面是代码，我用的struts2的标签，记得一定要用层将你要改的select包裹起来