当层遇到下拉框时

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量1.3k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript iframe applet ie border object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AppleBBS/article/details/244591
版权
在IE环境下，层遇到下拉框时总会出现层被下拉框所挡住的情形，这是怎么回事呢？这是IE的一个bug(其它浏览器没有这个问题)，下拉框是个web control，其优先级很高，一般的控件无法在其上方，为解决此问题，总结了以下几种常用方法：
隐藏下拉框（最常用方法）
以下是代码片段：
<!--StartFragment--><script language="JavaScript">
<!--
/*
 *    要显示某个层时调用HideElements(oDiv)
 *    隐藏某个层时调用ShowElements()
 */
/*
 * 隐藏下拉框函数
 */
function HideElements(el) 
{
    if (!window.__temp__) window.__temp__ = new Array();
    var o = ["select","iframe","applet","object"];
    for (var i=0; i<o.length; i++) 
    {
        var elms = document.getElementsByTagName(o[i]);
        for (var j=0; j<elms.length; j++) 
        {
            var p = getPosition(elms[j]);
            var e = 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";
            }
        }
    }
    function getPosition(el) 
    {
        var e = 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
        }
    };
};
/*
 * 显示下拉框
 */
function ShowElements() 
{
    var t = window.__temp__;
    if (t) {
        for (var i=0; i<t.length; i++) 
        {
            t[i].style.visibility = "visible";
        }
    }
};    

//-->
</script>    
用iframe为载体（实用）
以下是代码片段：
<!--StartFragment--><div οnclick="show()">onclick test</div>
<div id="demo" style="position:absolute;width:100;height:100;z-index:9999;visibility:hidden"></div>
<select style="width:150px"><option>see me ?</option></select>
<script language="JavaScript">
<!--
var i=0;
var ie = document.all ? 1 : 0;
var o = document.getElementById("demo");
var w = o.offsetWidth;
var h = o.offsetHeight;
if (ie)
    o.innerHTML = '<iframe name="WebFrame" frameborder=0 width="' + w + 
                 '" height="' + h + '" marginwidth=0 marginheight=0></iframe>';
function show() 
{
    var str = '<div style="border:1px solid;width:' + w + 'px;height=' + h + 'px">hello</div>'
    if (ie) {
        var doc = 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--><script language="JavaScript">
<!--
var oPopup = window.createPopup();
oPopup.document.body.innerHTML = 'New Window';
oPopup.show(100, 100, 200, 200, oPopup.document);
/*
 * window.createPopup产生的窗口可以跨载框架，更不用说下拉框了，但其使用有一定的限制，并不推荐使用
 */
//-->
</script>
AppleBBS
关注
专栏目录
下拉框可筛选多层级菜单多选_zTree下拉菜单多级菜单多选实现
weixin_30802125的博客
12-23 860
惯例，先上图：这是在一个项目中，为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。在实际的开发过程中，本来zTree也是可以满足需求的，但是zTree多选的话需要checkbox选择框，这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。如上图 这是个outlook样式的菜单。我们只需要简单的右键，查看代码，就可以把源码拿下来看看。我们需要的源码如下：如上 这是...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
weixin_29435115的博客
12-24 2964
layui嵌套下拉框实用方法(附效果图)在做项目时遇到一个问题，在layui 的数据表格table里面如何做一个下拉框呢？效果图如下： 这样的效果想必是最理想的了思路分析：我们可以通过layui的表单监听的方式实现效果form.on('select(stateSelect)',function(){});接下来我就直接开诚布公，放源码首先：我们设置一下下拉框的样式，进行美化一下/* 设置下拉框的高...
html 下拉框没有接在下面,当层遇到下拉框(select)框时的解决方法_html
weixin_30471581的博客
06-07 387
当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.1.最直接的方法:隐藏下拉框.下面提供的是一个比较通用的一组函数:test.htm————var HideElementTemp = new Array();//点击菜单时，调用此的函数,菜单对象function ...
layui弹出层+联动下拉框
Sacrifice_li的博客
04-02 2944
本人最近在做前端开发项目，用到了layui框架。 其中在弹出层，弹出内容为表单，表单中有联动下拉框的时候遇到了不小的问题。搜遍了百度，社区均无果，好在在社区提问了之后，有个兄弟及时帮我解决了问题。在此特别感谢一下他！！！要不是他我的实习进度要拖太久了。 这边记录一下在开发弹出层+联动下拉框的时候遇到的一些问题吧 1.由于我的表单中的是放在<body>之外的，这里参考的是la...
Vue el-select下拉框选择成功时不显示，但是当选择其他下拉框的时候，又可以成功显示
m0_48557659的博客
02-28 1899
change事件的，这个是我解决后加上的，现在遇到的bug,并不是通过this.form.*设置的，所以不是$set的问题。这个问题我只，也遇到过，想看的可以看一下。，今天我又遇到了，先看一下代码部分。
php select下拉框,下拉框处理（select）
weixin_42131785的博客
03-28 3701
在UI自动化测试过程中，经常会遇到一些下拉框，我们有三种可选方式来操作下拉框。第一种方法基于webdriver的两次click，很容易出现问题，不建议使用。(由于部分下拉框在点击一次后，失去焦点再点下一次时可能下拉框中的参数就消失了，那么就无法进行选择了，所以会出现无法定位到目标元素或目标元素不可见的问题。)第二种方法基于Action Chains进行连贯操作，首先点击下拉框，然后移动到目标选中元...
请教!layui框架获取弹出层的下拉框问题?
liuji0517的博客
04-27 1333
我想在layui框架的弹出层中点击下拉框调用ajax获取动态下拉框，百度中都是在父页面获取的，查了N多帖子，没发现有用的，不知道谁做过，求前辈们指导一下 点击下拉框发送一个ajax请求，拼接下拉框数据，之后是不可以再刷一下， 问题是我用layui弹出层，在点击下拉框那里自定义事件，获取无效，所以也不存在说点击下拉框发送一个ajax请求了，我也知道这样做，layui弹出层下拉框自定义事件资...
java下拉框如何一直显示_输入显示下拉框
weixin_33352628的博客
02-26 232
一。得到数据集函数：//数据集的填充可以用AJAXfunction loadUserAddressData(){var emails = new Array();var address = new addressBook("ly-dh","ly-dh@cc.com","group");emails[emails.length] = address;var address = new address...
css文本框添加下拉框,css实现文本框和下拉框结合的案例
weixin_39620845的博客
08-03 1208
html 代码部分000000111111222222CSS 部分代码.list-name-input{color: #333;font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;font-size: 15px;font-weight: bold;heigh...
解决layui 三级联动下拉框更新时回显的问题
10-16
在使用layui框架开发前端页面时，经常会遇到三级联动下拉框的场景。所谓三级联动，是指在一个表单中，当用户选择了一个省份时，城市下拉框会相应地更新为该省份下的城市列表；同理，当选择了某个城市时，相应的区域...
快速解决select2在bootstrap模态框中下拉框隐藏的问题
10-18
但是，当Select2与Bootstrap模态框结合使用时，可能会遇到一些交互上的问题，特别是下拉框无法正确显示在模态框的上方。 问题描述中提到，当在Bootstrap模态框中使用Select2时，下拉框会被模态框内容遮挡，这主要是...
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
然而，在实际使用过程中，用户可能会遇到一个问题，即在使用 `layer.open` 打开窗体时，会伴随有遮罩层的出现，这可能会影响用户体验。本文将详细讲解如何解决这个问题。 首先，我们要了解遮罩层在 Layui 中的作用...
解决Extjs下拉框不显示的问题
10-19
在页面上，如果一个ComboBox位于一个嵌套的窗口（Window）内，特别是当这个窗口本身也是一个窗口的子元素时，可能会由于层叠顺序（Z-Index）的混乱导致下拉列表被其他元素遮挡，从而显得不可见。此外，如果ComboBox...
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 441
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 899
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 592
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 238
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 563
【代码】JavaScript --数字Number的常用方法。
vue隐藏select下拉框
07-28
在Vue中，当使用v-model动态渲染select下拉框时，可能会遇到下拉框显示为空白的问题。这是因为select标签必须要有一个值才能正常显示，而默认情况下v-model绑定的变量是没有值的。因此，需要给v-model绑定的变量赋一个初始值，例如将select的初始值设置为空字符串。\[2\] 另外，还有两种解决方法可以解决这个问题。第一种方法是使用Vue的$set方法来为动态新增的属性赋值。在change事件中，可以使用this.$set来为inquire对象的selectData属性赋值，这样可以实现select下拉框选择后赋值成功并显示选中的值。\[3\] 第二种方法是使用forceUpdate方法来强制刷新render函数。如果下拉框的数据是从其他接口获取的，并且数据层次较深，render函数可能无法自动更新，需要手动强制刷新。在select的change事件中，可以加上this.$forceUpdate()来强制刷新，这样就可以解决选中值不显示的问题。需要注意的是，forceUpdate只会影响实例本身和插入插槽的子组件，而不是所有子组件。\[3\] 综上所述，解决Vue隐藏select下拉框的问题可以通过给v-model绑定的变量赋初始值，使用$set方法为动态新增的属性赋值，或者使用forceUpdate方法强制刷新render函数。 #### 引用[.reference_title] - *1* *2* [（详解）Vue设置select下拉框的默认选项（解决select空白的bug）](https://blog.csdn.net/Andye11/article/details/126933085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法](https://blog.csdn.net/weixin_44900104/article/details/126348729)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值