select option 问题总结

1、 IE8 下 select option 内容过长 , 展开时信息显示不全 , 简单折衷的方式就是给 option 加上 title 属性 , 但是又不想一个个的修改,怎么办呢,代码如下 :
//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 οnchange="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;" οnmοuseοver="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中又添加了两个事件:

ο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完美解决方案

开发过程中遇到这么一个问题有一个<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代码就是这些,在单击,下拉和鼠标滚轮操作时,响应相关的函数,在页面里面需要在需要这样用的元素中加入οnfοcus="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" οnfοcus="window.dropdown_menu_hack(this)"></s:select>
</div> 




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值