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判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
使用js实现数据格式化
Dec 03 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
基于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
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python中decorator使用实例
2015/04/14 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python通过文件头判断文件类型
2015/10/30 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python修改列表值问题解决方案
2020/03/06 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python模块内置属性概念及实例
2021/02/18 Python
学雷锋志愿服务月活动总结
2014/03/09 职场文书
六一儿童节主持词
2014/03/21 职场文书
工作表扬信
2015/01/17 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
python实现会员管理系统
2022/03/18 Python
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers