js解决select下拉选不中问题


Posted in Javascript onOctober 14, 2014

当事件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>

js解决select下拉选不中问题
当鼠标移上时就不会出现选不中select的情况了。

Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 #Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 #Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 #Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 #Javascript
js网页右下角提示框实例
Oct 14 #Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 #Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 #Javascript
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php实现的顺序线性表示例
2019/05/04 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
JS定时器实例
2013/04/17 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
几种tab切换详解
2017/02/03 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python正则简单实例分析
2017/03/21 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python集合常见运算案例解析
2019/10/17 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
一年级班主任感言
2014/03/08 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2015年教研员工作总结
2015/05/26 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
技术入股合作协议书
2016/03/21 职场文书