jQuery技术:jquery工具提示从下拉列表中选择显示全文

假设您使用此处提供的工具提示插件，以下代码应该满足您的要求：

 $(function() { $('#test').tooltip({ bodyHandler: function(){ return $(this).find("option:selected").text(); } }); }); 

当然， test将是您的select的id属性。 看看这里的小提琴。

假设您将option元素的ID设置为"lstMovies" ，您需要做的是在mouseover和mouseout事件上显示和隐藏工具提示div 。

 $("#lstMovies").mouseover( function (event) { $("#spnTip").text($(this).val()) $("#spnTip").show(); $("#spnTip").style.left = event.pageX; $("#spnTip").style.top = event.pageY + 20; }); $("#lstMovies").mouseout( function (event) { $("#spnTip").hide(); }); 

HTML和CSS几乎与您的示例完全一样。 唯一的区别是在工具提示div（ID：spnTip）的内联样式中，我将display属性设置为none而不是将visibility属性设置为hidden 。

JAVASCRIPT和JQUERY。

一次仅对页面中所有下拉列表的选定值的工具提示..

在下面的代码中，我将为下拉列表中的所有值以及所选值添加工具提示。 这在java脚本中也适用于页面中的所有下拉列表。

对于任一function，请执行以下操作以触发它。

  ...  

要么，

或者如果你使用道场，

要么

jQuery使整个脚本更简单..

 $(document).ready(function() { $("select").each(function() { var s = this; for (i = 0; i < s.length; i++) s.options[i].title = s.options[i].text; if (s.selectedIndex > -1) s.onmousemove = function() { s.title = s.options[s.selectedIndex].text; }; }); }); 

我建议你在下拉列表的onChange事件上使用该函数而不是文档就绪事件。

需要了解更多jQuery教程分享jquery工具提示从下拉列表中选择显示全文，都可以关注jQuery技术分享栏目---计算机技术网(www.ctvol.com)!