jquery工具提示从下拉列表中选择显示全文
我怎样才能实现以下目标:
http://easylistbox.com/demoDropDownToolTip.html
用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事件上使用该函数而不是文档就绪事件。
- 附加后的访问元素
- 基于令牌的身份validation中的会话
- 如何使用fancybox按钮助手+ fancybox缩略图助手?
- 在一系列操作之后,如何将元素重置为原始状态?
- Angularjs与jquery auto完成无法正常工作
- Ajax成功和错误function失败
- 如何在Bootstrap3 Carousel上通过转换将滑动动画更改为淡入/淡出
- JavaScript或jQuery可以在多个条件上对JSON数组进行排序吗?
- XMLHttpRequest的; 交叉源请求仅支持协议方案:http,数据,chrome,chrome-extension,https,chrome-extension-resource