悬停在<选项>上在选择列表中 [英] Hovering over an <option> in a select list

问题描述

我试图在选择列表中悬停选项时显示说明，但是，在悬停时我无法识别代码。

相关代码：

选择表单块：

 < select name =optionListid =optionListonclick =rankFeatures（false）size =5>< / select> 
< select name =ranksid =rankssize =5>< / select> 
  

操作选择（前面定义的数组）：

< pre $ 函数rankFeatures（create）{

var $ optionList = $（＃optionList）;
var $ ranks = $（＃ranks）; （i = 0; i <5; i ++）{
$ optionList.append（features [i]）的

if（create == true）{
;
};
}
else {
var index = $ optionList.val（）;
$（'＃optionList option：selected'）。remove（）;
$ ranks.append（features [index]）;
};


}

这一切都有效。当我试图处理悬停在选项上时，这一切都崩溃了：

  $（document）.ready（
 
函数（事件）{
 $（'select'）。hover（函数（e）{
 var $ target = $（e.target）; 
 if（$ target。 （'option'））{
 alert（'yeah！'）; 
}; 
}）
}）
  

我在通过Stack Exchange进行搜索时发现了代码，但我没有运行它。当我点击一个选项时会发生警报。如果我不移动鼠标并按回车键关闭警报，它就会消失。如果我用鼠标关闭，会弹出第二个警报窗口。偶尔移动鼠标会导致警告框弹出。
我尝试过直接针对这些选项，但没有取得什么成功。

感谢您的阅读！

解决方案

您可以使用 mouseenter 事件。

你不必使用所有这些代码来检查元素是否是选项

只需使用 .on（） 语法委托给 select 元素。

< $（$'$'$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
alert（'yeah'）;
//这是指选项，所以如果你需要，你可以做这个.value ..
}）;
}）;

演示 http://jsfiddle.net/AjfE8/

I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.

Relevant code:

Select chunk of form:

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

Manipulating selects (arrays defined earlier):

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

This all works. It all falls apart when I try to deal with hovering over options:

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up. I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?

Thanks for reading!

解决方案

You can use the mouseenter event.

And you do not have to use all this code to check if the element is an option.

Just use the .on() syntax to delegate to the select element.

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

Demo at http://jsfiddle.net/AjfE8/

这篇关于悬停在&lt;选项&gt;上在选择列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！