当鼠标移到select的下拉列表的option上所触发的事件是什么

wind_rosebush 2009-03-10 10:44:50
已经单击过select框,下拉列表列出来了.
然后鼠标移到下拉的某个选项上所触发的事件.

因为某个option的内容太长,内容不能完全显示出来,我想捕捉这个事件,调用一个函数
然后出现一个很小的提示框,那里面有着option的全部内容.
就像使用eclipse里面,鼠标放在一个类的名字或方法上面,然后就会有一个提示框来说明
该类或方法的信息.

请教高人?
...全文
1936 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
haiben080808 2010-05-21
  • 打赏
  • 举报
 回复
无痕谢过大家的帮助!
wind_rosebush 2009-03-11
  • 打赏
  • 举报
 回复
无痕谢过大家的帮助!
luojihaidao 2009-03-10
  • 打赏
  • 举报
 回复
这个是自动换行的， 例如:
<div id=test>
</div>
<div>
<div value='1'>aaaa</div>
<div value='2'>bbb</div>
<div value='3'>ccc</div>
<div value='4'>ddd</div>
</div>
这里面的内容太长的话就会自动找行， 注意如果全是aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 这样太长的话不会换， 因为div是把这个aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 看成的一个单词不会换， 如果是中文的话它就会自动换了。

<div id=test>
</div>
<div>
<div value='1'>若需载地在城地夺在城地在城地在城地在城城地在城地大幅度地夺夺夺</div>
<div value='2'>bbb</div>
<div value='3'>ccc</div>
<div value='4'>ddd</div>
</div>
这样的。
luojihaidao 2009-03-10
  • 打赏
  • 举报
 回复 


.value_div_bg{

        width:200px;

        height: 24px;

        border: 1px solid #888888;

        float: left;

        padding-top: 5px;

        padding-left: 3px;

        background: url( ../images/select/select_bg.bmp ) 98% center no-repeat;

    }

    .data_div{

        border: 1px solid #888888; width: 100%;background-color: white;display:none;

        position:absolute;

    }

    .itemDiv{

        display: block;

        padding-left: 3px;

        padding-top: 3px;

        width:100%;

        height: 20px;

        border-top:1px dotted white;

        border-bottom:1px dotted white;

        cursor: pointer;

    }

    .pickDiv{

        display: block;

        width:100%;

        background-color: #DDDBD6;

        border-top:1px dotted black;

        border-bottom:1px dotted #888888;

        cursor: pointer;

        padding-left: 3px;

        padding-top: 3px;

        height: 20px;

    }

    a:link {

        color: #000;

        text-decoration: none;

    }

    a:visited {

        color: #000;

        text-decoration: none;

    }

    a:hover {

        color: #000;

        text-decoration: none;

    }

    a:active {

        color: #000;

        text-decoration: none

    }








//浏览器类型以及版本 

var brow = {}; 

var ua = navigator.userAgent.toLowerCase(); 

var s; 

(s = ua.match(/msie (\d+)/)) ? brow.ie = s[1] : 

(s = ua.match(/firefox\/(\d+)/)) ? brow.firefox = s[1] : 

(s = ua.match(/chrome\/(\d+)/)) ? brow.chrome = s[1] : 

(s = ua.match(/opera.(\d+)/)) ? brow.opera = s[1] : 

(s = ua.match(/version\/(\d+).*safari/)) ? brow.safari = s[1] : 0; 



function addEventHandler(element,eventN,eventM){ 

if(!element){ 

return; 

} 

if(element.addEventListener){ 

element.addEventListener(eventN,eventM,false); 

}else if(element.attachEvent){ 

element.attachEvent('on'+eventN,eventM) 

}else{ 

element['on'+eventN] = eventM; 

} 

} 



function removeEventHandler(element,eventN,eventM){ 

if(!element){ 

return; 

} 

if(element.removeEventListener){ 

element.removeEventListener(eventN,eventM,false); 

}else if(element.detachEvent){ 

element.detachEvent('on' + eventN,eventM); 

}else{ 

element['on' + eventN] = null; 

} 

} 





function getNode(id){ 

return typeof(id) == 'string' ? document.getElementById(id) : id; 

} 



function createSelect(id){ 

var obj = getNode(id); 

var dataAll = getNextChild(obj); 

if(dataAll){ 

if(dataAll.tagName == "DIV"){ 

if(dataAll.innerHTML != ''){ 

obj.className = 'value_div_bg'; 

dataAll.className = 'data_div'; 

dataAll.style.top = obj.offsetTop + obj.offsetHeight + 'px'; 

dataAll.style.left = obj.offsetLeft + 'px'; 

dataAll.style.width = (brow.ie ? obj.offsetWidth : obj.clientWidth) + 'px'; 

addEventHandler(document,'click', 

function(e){ 

var event = e.target || window.event.srcElement; 

if(obj == event){ 

dataAll.style.display = 'block'; 

return; 

} 

if(dataAll != event) 

dataAll.style.display = 'none'; 

} 

) 

changeCurData(obj,getFirstChild(dataAll.childNodes[0])); 

var data = getChildren(dataAll); 

for(var i=0; i <data.length;i++){ 

data[i].className = "itemDiv"; 

addEventHandler(data[i],'mouseover', 

function(e){var event = e.target || window.event.srcElement;event.className = 'pickDiv';} 

); 

addEventHandler(data[i],'mouseout', 

function(e){ var event = e.target || window.event.srcElement;event.className = 'itemDiv';} 

); 

addEventHandler(data[i],'click', 

function(e){var event = e.target || window.event.srcElement;dataAll.style.display = 'none';changeCurData(obj,event);} 

); 

} 

}else{ 

document.body.removeChild(dataAll); 

} 

} 

} 



} 



function changeCurData(objChange, objSource){ 

objChange.setAttribute('value',objSource.getAttribute('value')); 

objChange.innerHTML = objSource.innerHTML; 

} 



function getNextChild(obj){ 

var child = obj.nextSibling; 

var childTagName = obj.tagName; 

while (child) { 

if (child.tagName == childTagName.toUpperCase()) { 

return child; 

} 

child = child.nextSibling; 

} 

return null; 

} 



function getFirstChild(child){ 

while (child) { 

if (child.nodeType == 1) { 

return child; 

} 

child = child.nextSibling; 

} 

return null; 

} 



function getChildren(parentObj){ 

var child = parentObj.firstChild; 

var items = []; 

while (child) { 

if (child.nodeType == 1) { 

items.push(child); 

} 

child = child.nextSibling; 

} 

return items; 

}
luojihaidao 2009-03-10
  • 打赏
  • 举报
 回复
自己用DIV 模拟！我自己写的一个（IE FF下测试通过）


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <link href="./styles/selectNode.css" rel="stylesheet" type="text/css"/>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script type="text/javascript" src="./scripts/selectNode.js"></script>

  <script type="text/javascript">

     function init(){

        createSelect('test');

        createSelect('test1');

     }

     

     function test(id){

        var obj = document.getElementById(id);

        alert(obj.getAttribute('value') + "======" +obj.innerHTML)

     }

  </script>

 </HEAD>



 <BODY onload='init()'>

  <div id=test>

  </div>

  <div>

        <div value='1'>aaa</div>

        <div value='2'>bbb</div>

        <div value='3'>ccc</div>

        <div value='4'>ddd</div>

    </div>



    <div id=test1>

  </div>

  <div>

        <div value='1'>aaa</div>

        <div value='2'>dfdf</div>

        <div value='3'>ccc</div>

        <div value='4'>ddd</div>

    </div>

<br>

<br>

    <input type='button' onclick='test("test")' value='testData'/>

    <input type='button' onclick='test("test1")' value='test1Data'/>

 </BODY>

</HTML>
wind_rosebush 2009-03-10
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 asdfgh_5982 的回复:]
首先有一个很不幸的消息告诉你，option在IE中的onmouseover事件并不会响应，但FF可以。
建议你用DIV，ul,li模拟select，这样还可以进行美化。
提供一点你需要的代码，JQuery写的：

HTML code
<!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>
<script type="text/javascript" src=…
[/Quote]
首先有一个很不幸的消息告诉你，option在IE中的onmouseover事件并不会响应

我想一个普普通通的select,下面是普普通通的option,真的不能响应吗?
我是这样想的,当点击select框的时候,这时下拉列表弹出来,这时候得到点击事件的事件源,
通过事件源再得到鼠标移到option上面的onmouseover事件...
因为对事件源这些东西不太了解,只是这样想的...
难道真的不可以吗?
我必须要响应option的onmouseover事件啊,即使再麻烦也行?
asdfgh_5982 2009-03-10
  • 打赏
  • 举报
 回复
首先有一个很不幸的消息告诉你，option在IE中的onmouseover事件并不会响应，但FF可以。
建议你用DIV，ul,li模拟select，这样还可以进行美化。
提供一点你需要的代码，JQuery写的：


<!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>

<script type="text/javascript" src="js/jquery-1.2.js"></script>

<script type="text/javascript">



    $(function($){

        $("#selTest option").each(function(){

            $(this).hover(

            function(){

                alert(this.innerHTML);

            },

            function(){

                return;

            }

            );

        });

    });

</script>

<title></title>

</head>

<body>

<select id="selTest" >

<option >请选择</option>

    <option >111</option>

    <option >222</option>

</select>

<div class="footer"></div>

</div>

</body>

</html>
CutBug 2009-03-10
  • 打赏
  • 举报
 回复
onmouseover不就可以了
atmo 2009-03-10
  • 打赏
  • 举报
 回复
div模拟吧
kokoge 2009-03-10
  • 打赏
  • 举报
 回复
同样的问题，我也找了半天了
横向滚动条不支持，onmouseover不响应，郁闷啊
网上的好像都是用的模拟的方法

如果楼主找到什么别的方法麻烦通知一下啊
wind_rosebush 2009-03-10
  • 打赏
  • 举报
 回复
"可惜IE不支持"

听了这个消息我无比的震惊,我郁闷到家了...
luojihaidao兄那个方法我看了,很多东西不懂,那个级联我花了很长时间弄出来了..
本想再弄一下就好了.谁知就不行.

我那个弄完了,再结贴,看有没有高人了..
郁闷啊!
asdfgh_5982 2009-03-10
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 wind_rosebush 的回复:]
我想一个普普通通的select,下面是普普通通的option,真的不能响应吗?
我是这样想的,当点击select框的时候,这时下拉列表弹出来,这时候得到点击事件的事件源,
通过事件源再得到鼠标移到option上面的onmouseover事件...
因为对事件源这些东西不太了解,只是这样想的...
难道真的不可以吗?
我必须要响应option的onmouseover事件啊,即使再麻烦也行? …
[/Quote]

建议使用luojihaidao 兄才的方法。你的想法是正确的，可惜IE不支持
一把编程的菜刀 2009-03-10
  • 打赏
  • 举报
 回复 
<select id="aaaa" name="sgsgs" >

<option value="" onmousemove="show(this.text)">dadadaad</option>

<option value="" onmousemove="show(this.text)">4234242</option>

</select>

<table>

<tr>

<td id="aaa">hfhfhf

</td>

</tr>

</table>

  <script   Language="JavaScript"> 

  var i=0

function show(aa){

document.getElementById("aaa").innerHTML=i+aa;

i++;

}

  </script>
可惜IE不支持
windows网络编程之tcp/ip
课程内容： c/s模型的编码，5种windows网络模型：select，异步选择，事件选择，重叠io，完成端口，以及基础理论知识的讲解。 课程分八章，总课时100课时左右，每日更新2~5节. 课程代码会带大家一行一行书写，保证...
鼠标移入select options会触发mouseleave 事件处理方案
参考 html select控件移动到option标签时就触发mouseleave()解决方法html select控件移动到option标签时就触发mouseleave()解决方法https://blog.csdn.net/tian_i/article/details/79181721 js获取某个容器下的所有标签，并判断标签类型https://blog.csdn.net/weixin_30498807/article/details/102265975 js(判断元素是否包含某个class名)https
【小技巧】Select下拉列表覆盖DIV菜单的另类解决方案
最近在工作中接触到了这样一个问题：当把用于选择尺寸的下拉列表（html select标签实现）打开后，不选择，然后移动鼠标到页面头部的菜单栏，此时菜单栏接受onmouseover事件，显示一个DIV实现的菜单，但这个操作并没有将页面焦点从select上移开，即select依然处于打开状态，问题出现了，打开的option列表覆盖住了弹出的菜单！用户体验不好。 这个问题的本质原因是，在浏览器中，se
iview实现给select下拉框添加鼠标悬浮显示选项简介提示信息d效果（简洁版-3个坑）
因为懒，我还是没有选择用原生js绑定鼠标事件来实现，选择了iview的组件ToolTip，于是经历3个大坑才最终得以解决。
前端HTML调用jQuery库，鼠标事件、键盘事件、表单事件、编辑事件、滚动事件（前端：HTML搭配jQuery系列教程八）
一、鼠标移入和鼠标移出 说明： 当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就会触发mouseout事件。mouseover和mouseout平常都是形影不离的。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="../static
JavaScript

87,914

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章