js解决select下拉选不中问题

前端技术 2023/09/02 JavaScript

当事件mouseover中出现select下拉框时，select下拉是选不中的，解决办法：

var o = e.relatedTarget || e.toElement;//判断下移动到的对象，移动到option上ie下是null，firefox等为undefined。。
if (!o) return;//为option退出不隐藏

完整代码案例为：

<!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>
<style type=\"text/css\">
*{margin:0;padding:0;list-style:none;border:0;}
.pop_blue{ position:absolute; cursor:pointer; padding:10px;}
.pop_blue span{ display:inline-block; width:24px; height:32px; background: url(../images/pop_blue.png) no-repeat;}

.map_xf .rud1{width:210px; position:absolute;border:1px solid #ddd; display:none; background-color:#fff;padding:17px 25px;}
.map_xf .rud1 li{margin:0 0 8px;}
.map_xf .rud1 input,.map_xf .rud1 select{height:22px;}
</style>
<script type=\"text/javascript\" src=\"jquery-1.9.1.min.js\"></script>
<script type=\"text/javascript\">
$(function(){
$(\'.pop_blue\').hover(
function(){
$(this).find(\'.rud1\').show();
$(this).css(\"z-index\",\"9999\");
},
function(e){
var o = e.relatedTarget || e.toElement;//判断下移动到的对象，移动到option上ie下是null，firefox等为undefined。。
if (!o) return;//为option退出不隐藏

$(this).find(\'.rud1\').hide();
$(this).css(\"z-index\",\"0\");
}
)
})
</script>
</head>

<body>
<div style=\"position:relative;width:100px;height:100px\">
<div class=\"pop_blue\" style=\"top:0px; left:0;\"> <span>鼠标移上</span><i></i>
<div class=\"rud1 font12\" style=\"top:10px;left:40px; display:none;padding:50px;background:blue;\">
<ul>
<li>
<select class=\"w100\" id=\"dan\">
<option value=\"选择单元\" selected=\"\">选择单元</option>
<option value=\"选择单元\" selected=\"\">选择单元1</option>
<option value=\"选择单元\" selected=\"\">选择单元2</option>
<option value=\"选择单元\" selected=\"\">选择单元3</option>
<option value=\"选择单元\" selected=\"\">选择单元4</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>


当鼠标移上时就不会出现选不中select的情况了。

本文地址：https://www.stayed.cn/item/5239

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案