开发过程中遇到这么一个问题有一个<select></select>的选择框,里面有个option的值很长大约128个字节,那么如果我不指定select的width时候,这个框就会很长,但是如果我限制了width那么这个option又显示不全,这个BUG仅仅会在IE中出现,如何解决呢,其实可以把select的下拉框用一个层覆盖掉,那个层会显示完整的数据,而select的widt指定好,这样整个页面的布局都不会被影响。所有的操作都通过JS实现,下面我就把代码贴出来。
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
-->function foo(px,py,pw,ph,baseElement,fid)
{
var win = document.getElementById(this.fid);
};
function dropdown_menu_hack(el)
{
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 = value;
while(el.options.length>0){el.options[0].removeNode(true);}
el.appendChild(o);
el.title = value;
el.contentIndex = value ;
el.value=value;
//alert(value);
//$("#deviceOwnerValue").val(value);
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: #003399;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");
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: #003399;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="#003399";}
mb.options.selected = this;
this.style.background="#333366";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.innerHTML);};
mb.options[i].onkeydown = function(){selectMenu(this,this.innerHTML);};
if(i == el.contentIndex)
{
mb.options[i].style.background="#333366";
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包裹起来
<!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><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>
分享到:
相关推荐
< input id="text1" type="text" echange="echange" class="e_select" style="width: 100px;" etop="0" edata="{,普通:普通AA,模糊:模糊,右边模糊:右边模糊}"/> 构造方法在:input表单添加class="e_select"属性 ...
在做下拉框select的时候用一个箭头符号,作为下拉框的三角,在firefox和chrome下均可以正常显示,但是在IE下无法显示。 查找了很久,发现是图片格式问题,把png格式的转换成gif的就没有问题了。。。。 附相关代码,...
this.width = parseInt(this.select.style.width); this.height = (this.select.style.height) ? parseInt(this.select.style.height) : SS_ENV.DefaultHeight; this.OptionHeight = this.height - 4; this....
在下图中有一个dojo的select,当选项过长,在IE9中没法显示正确。 css设置如下,overflow:hidden没有起作用。 复制代码代码如下: .my-select { max-width: 200px; overflow: hidden; word-break: break-all; text-...
–[if lt IE 9]> [removed] jQuery(function($){ var el; $(“select”).each(function() { el = $(this); el.data(“origWidth”, el.css(“width”)); // el.data(“oriWidth”,85); }) .focusin(function(){ el=$...
select id=”jobSelect” style=”width: 200px;” name=”jobSelect”> ’jobSelect xss=removed> ”selected” value=”-1″>–依职类筛选– ”-1″>–依职类筛选– <s:iterator value=”jobCat”
width:$("#selectArea").width(), height:$("#selectArea").height() }); } if(pic_select=="actual size"){ image.attr({ width:image_width, height:image_height }); } if(pic_select=="fit image"){ var ration ...
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧。 <html lang=en> <head> <meta charset=UTF-8>...
如下所示: <!...<... <...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <link rel="stylesheet
table的border属性用来指定边框宽度,table特有的frame属性是用来设置或获取表格周围的边框显示的方式。 w3c的tabel的frame部分说明frame可以是以下值: void: No sides. This is the default value. above: The ...
在IE5.5+中开始支持的Popup窗口有很多很特别的特性: Popup窗口可以超出浏览器窗口区域; 可以不用担心被下拉框、flash、Iframe等这些东西遮挡; 一个Popup窗口打开后,当在它的区域以外点击或者另一个Popup...
对于ie6,7下的文字间距问题,网上看到有人说设置width:14px就好了,我试了下发现width:13px更佳。这个问题解决。 对于文字偏上的问题,试了vertical-align下的所有属性都不行。后来发现vertical-align是可以设置...
-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/seltab...
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并...
5、弹出消息框时屏蔽页面其它元素的操作,自动隐藏页面select及iframe下select(无限级select隐藏),并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态,即如果原来select就是隐藏的,则消息框弹出并...
* 4)支持ie5.0 ie5.5 ie6.0 ~...,在ie5.0上,诱导提示窗口在浏览器的状态栏中,在ie5.5以上版本上诱导窗口为一个浮动 * 窗口。 * * 5)新版本特性:支持特殊字符的诱导,更改了不合法按键弹出窗口的问题,增加了...
在IE下,我们只要指定select的宽度即可.如: 复制代码代码如下:<select name=”ddlDept” id=”ddlDept” style=”width:80px;”>上海 – 物业资讯部</option><option>北京 – 物业资讯部</option><option>重庆 ...
如果选择"select"时,它将自动输入"<select name="" > </select>"; 如果选择"option"时,它将自动输入"<option value="" > </option>"; 12.在编辑jsp页面时,在之间,输入"out.","session.","application.", 就会显示...
弹出框在ie6下不会被select控件穿透; 无外部css文件,引用Dialog.js即可使用; 对iframe下的应用作了充分考虑,适合复杂的系统应用; Dialog显示的内容(三种):1、指向一个URL的iframe窗口;2、页面内...