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 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
虫族 Zerg 魔法科技
2020/03/14 星际争霸
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
详解ES6中的let命令
2020/04/05 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python实现发送email的几种常用方法
2014/08/18 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python matlab库简单用法讲解
2020/12/31 Python
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
高中军训感想300字
2014/03/04 职场文书
建议书怎么写
2014/03/12 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
Redis实现分布式锁的五种方法详解
2022/06/14 Redis