select option 问题总结

最新推荐文章于 2023-07-21 09:53:44 发布

l498948617

最新推荐文章于 2023-07-21 09:53:44 发布

阅读量2.2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/l498948617/article/details/22171071

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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>