在IE环境下，层遇到下拉框时总会出现层被下拉框所挡住的情形，这是怎么回事呢？这是IE的一个bug(其它浏览器没有这个问题)，下拉框是个web control，其优先级很高，一般的控件无法在其上方，为解决此问题，总结了以下几种常用方法：
隐藏下拉框（最常用方法）
以下是代码片段：
<!--StartFragment--><scriptlanguage="JavaScript">
<!--
/*
*要显示某个层时调用HideElements(oDiv)
*隐藏某个层时调用ShowElements()
*/
/*
*隐藏下拉框函数
*/
functionHideElements(el)
{
if(!window.__temp__)window.__temp__=newArray();
varo=["select","iframe","applet","object"];
for(vari=0;i<o.length;i++)
{
varelms=document.getElementsByTagName(o[i]);
for(varj=0;j<elms.length;j++)
{
varp=getPosition(elms[j]);
vare=getPosition(el);
if(e.left+e.width>p.left&&e.left<p.left+p.width&&
e.top+e.height>p.top&&e.top<p.top+p.height)
{
window.__temp__[j]=elms[j];
elms[j].style.visibility="hidden";
}
}
}
functiongetPosition(el)
{
vare=el.offsetParent,x=el.offsetLeft,y=el.offsetTop;
while(e.tagName!='BODY')
{
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetParent;
}
return{
"left":x,
"top":y,
"width":el.offsetWidth,
"height":el.offsetHeight
}
};
};
/*
*显示下拉框
*/
functionShowElements()
{
vart=window.__temp__;
if(t){
for(vari=0;i<t.length;i++)
{
t[i].style.visibility="visible";
}
}
};
//-->
</script> |
用iframe为载体（实用）
以下是代码片段：
<!--StartFragment--><divonclick="show()">onclicktest</div>
<divid="demo"style="position:absolute;width:100;height:100;z-index:9999;visibility:hidden"></div>
<selectstyle="width:150px"><option>seeme?</option></select>
<scriptlanguage="JavaScript">
<!--
vari=0;
varie=document.all?1:0;
varo=document.getElementById("demo");
varw=o.offsetWidth;
varh=o.offsetHeight;
if(ie)
o.innerHTML='<iframename="WebFrame"frameborder=0width="'+w+
'"height="'+h+'"marginwidth=0marginheight=0></iframe>';
functionshow()
{
varstr='<divstyle="border:1pxsolid;width:'+w+'px;height='+h+'px">hello</div>'
if(ie){
vardoc=window.frames["WebFrame"].document;
doc.open();
doc.write('<html><head></head><body>'+str+'</body></html>');
doc.close();
}else{
o.innerHTML=str;
}
o.style.visibility=++i%2?'visible':'hidden';
};
//-->
</script> |
popup方法（需IE5.5+）
以下是代码片段：
<!--StartFragment--><scriptlanguage="JavaScript">
<!--
varoPopup=window.createPopup();
oPopup.document.body.innerHTML='NewWindow';
oPopup.show(100,100,200,200,oPopup.document);
/*
*window.createPopup产生的窗口可以跨载框架，更不用说下拉框了，但其使用有一定的限制，并不推荐使用
*/
//-->
</script> |
分享到：
相关推荐
Freemarker是一个强大的模板引擎，常用于Web应用中的视图层渲染，比如Spring MVC框架中的JSP替代技术。本示例关注的是如何在Freemarker（FTL）中创建一个通用的`select`下拉框，以满足各种Web界面中的下拉选择需求。...
- 当用户改变筛选条件时，根据当前的筛选状态更新显示的数据，这可能涉及到数据过滤、排序等操作。 4. **样式多样化**： - 为了满足不同设计风格的需求，"FilterBar"需要提供多种样式。例如，可以通过设置主题...
在使用layui框架开发前端页面时，经常会遇到三级联动下拉框的场景。所谓三级联动，是指在一个表单中，当用户选择了一个省份时，城市下拉框会相应地更新为该省份下的城市列表；同理，当选择了某个城市时，相应的区域...
在项目实践中，开发者可能会遇到的问题包括但不限于：网络请求的处理（如使用Retrofit或OkHttp）、数据解析（如使用Gson或Jackson库）、数据安全（如防止SQL注入）、以及线程同步（避免在主线程进行耗时操作，可使用...
在设计用户界面时，经常会遇到需要在下拉框中展示层级结构数据的情况，这时可以使用扩展控件来实现“下拉框中显示树控件”的功能。这个特性允许用户在一个紧凑的空间内浏览和选择嵌套的数据项，提高了交互体验。 ...
但是，当Select2与Bootstrap模态框结合使用时，可能会遇到一些交互上的问题，特别是下拉框无法正确显示在模态框的上方。 问题描述中提到，当在Bootstrap模态框中使用Select2时，下拉框会被模态框内容遮挡，这主要是...
在页面上，如果一个ComboBox位于一个嵌套的窗口（Window）内，特别是当这个窗口本身也是一个窗口的子元素时，可能会由于层叠顺序（Z-Index）的混乱导致下拉列表被其他元素遮挡，从而显得不可见。此外，如果ComboBox...
然而，在实现这一功能时，可能会遇到自动提示位置的问题，即提示列表的位置可能不正确，无法准确地与输入框对齐。这个问题在给定的代码片段中有所体现。 在描述的代码中，`divPosition()` 函数用于计算并设置提示层...
- 省份选择联动逻辑：为省下拉列表添加事件监听器，当用户选择一个省份时，触发一个函数来处理联动逻辑。该函数将清空城市下拉列表，并根据所选省份动态填充其对应的城市。 - 城市选择联动逻辑：类似地，为城市下拉...
在Windows Presentation Foundation (WPF) 中，开发人员经常会遇到需要实现多选下拉框的场景。这个场景通常涉及用户能够从一个下拉列表中选择多个选项。为了满足这样的需求，开发者可能需要自定义控件或者利用现有的...
在网页设计中，浮动层（通常通过CSS的`position: absolute`或`position: fixed`实现）常用于创建弹出窗口、提示信息等，但当浮动层与页面中的`<select>`下拉框重叠时，IE6往往无法正常遮盖住下拉框，导致交互体验不...
然而，在实际使用过程中，用户可能会遇到一个问题，即在使用 `layer.open` 打开窗体时，会伴随有遮罩层的出现，这可能会影响用户体验。本文将详细讲解如何解决这个问题。 首先，我们要了解遮罩层在 Layui 中的作用...
在实际使用中，开发者可能会遇到一些挑战，比如性能问题（大量数据加载时）、界面响应性（触摸设备上的交互）、以及兼容性问题（不同浏览器和版本的差异）。解决这些问题可能涉及到对EXT2.2组件的深入理解，优化数据...
当用户将鼠标悬停在触发器上时，子菜单项会滑动显示出来。这种效果可以通过CSS的`display`属性来实现，通过设置`display:none`隐藏子菜单，然后在触发器的`:hover`状态下改变为`display:block`使其可见。 接下来，...
当用户在弹出层内进行操作时，我们不希望弹出层立即消失，而是希望用户完成选择后再关闭。本文将详细讲解如何在Vue中实现点击选择框时阻止弹出层自动消失的方法。 首先，我们需要理解问题的根源。在Vue中，事件会从...
在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况： 解决方法：在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪，会呈现在元素框之外。)即可显示出下拉框 1.找到层...
在IT行业中，尤其是在前端开发领域，我们经常遇到与浏览器兼容性相关的问题，特别是涉及到老旧的Internet Explorer（如IE6）时。"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠...
**描述**：当 `dialog` 在 IE6 浏览器下使用时，可能会遇到 z-index 无效的问题，导致 select 下拉框被遮挡。 **代码**： ```javascript // 启用 bgiframe 功能来解决 IE6 下的 z-index 问题。 $(".selector")....
综上所述，当遇到CSS无法直接控制`<select>`下拉框样式的难题时，JavaScript提供了一种强大的解决方案。开发者可以通过上述方法，结合实际需求，创建出符合设计风格且具有良好交互性的自定义下拉搜索框。在实践中，...
联动指的是在多个下拉框或选择器之间建立关联，当用户在一个下拉框中做出选择时，其他下拉框的内容会根据预设的规则自动更新。在省市区三级联动中，当用户选择了省份，对应的市和区的选项会随之更新，以此类推。 ...