脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → select下拉是选不中

js解决select下拉选不中问题

 更新时间：2014年10月14日 16:41:22   投稿：whsnow  
当事件mouseover中出现select下拉框时，select下拉是选不中的，下面有个不错的解决方法，大家可以看看

当事件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的情况了。

您可能感兴趣的文章:

相关文章

  • axios实现取消请求的方法详解

    axios实现取消请求的方法详解

    axios 是现在前端项目中最常使用的一个请求库,目前 Github star 已经达到了 104k star,本文我们讨论的问题是axios 是如何实现取消请求（Cancel requests）的,文中有详细的实现方法,感兴趣的朋友可以参考下
    2024-04-04
  • javascript解析xml实现省市县三级联动的方法

    javascript解析xml实现省市县三级联动的方法

    这篇文章主要介绍了javascript解析xml实现省市县三级联动的方法,涉及javascript针对节点的操作与XML文件解析的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现点击图片换背景

    JavaScript实现点击图片换背景

    这篇文章主要为大家详细介绍了JavaScript实现点击图片换背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 利用JavaScript实现简单的网页时钟

    利用JavaScript实现简单的网页时钟

    这篇文章主要介绍了利用JavaScript实现简单的网页时钟，主要使用了js的日期对象,实现的时候先创建一个日期对象，并进行网页布局,对时间获取之后将时间填入对应的标签内。然后使用多线程实现时钟的变动,需要的朋友可以参考一下
    2022-02-02
  • JS正则验证多个邮箱完整实例【邮箱用分号隔开】

    JS正则验证多个邮箱完整实例【邮箱用分号隔开】

    这篇文章主要介绍了JS正则验证多个邮箱的方法,且邮箱字符串使用分号隔开,非常简单实用,需要的朋友可以参考下
    2017-04-04
  • 使用Threejs加载外部glb文件

    使用Threejs加载外部glb文件

    这篇文章主要介绍了使用Threejs加载外部glb文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • a标签置灰不可点击的实现方法

    a标签置灰不可点击的实现方法

    下面小编就为大家带来一篇a标签置灰不可点击的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS使用正则表达式判断输入框失去焦点事件

    JS使用正则表达式判断输入框失去焦点事件

    这篇文章主要介绍了JS使用正则表达式判断输入框失去焦点事件问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 理解JS事件循环

    理解JS事件循环

    这篇文章主要帮助大家理解JS事件循环，深入浅出的讲解了javascript事件循环，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript实现时钟功能

    JavaScript实现时钟功能

    这篇文章主要为大家详细介绍了JavaScript实现时钟功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论