Question

我如何实现以下目标：

http://easylistbox.com/demoDropDownToolTip.html

使用jquery工具提示？我可以举个例子吗

Answer 1

假设您使用的是here提供的工具提示插件，以下代码应该符合您的要求：

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

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

Answer 2

假设您将option元素的ID设置为"lstMovies"，您需要做的是在div和{{1}上显示并隐藏工具提示mouseover } events。

mouseout

HTML和CSS几乎与您的示例完全一样。唯一的区别是在工具提示div的内联样式（ID：spnTip）中，我将$("#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(); });属性设置为display，而不是将none属性设置为{{1} }。

Answer 3

JAVASCRIPT AND JQUERY。

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

<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
    for(i=0;i<drpdwnlst.length;i++){
        drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
    }
}
</script>

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

<script language="javascript">
function dropDwnToolTips() {
  var drpdwnlst = document.getElementsByTagName("Select");
  for(i=0;i<drpdwnlst.length;i++){
      for(j=0;j<drpdwnlst[i].length;j++){
          drpdwnlst[i][j].title = drpdwnlst[i].options[j].text;
      }
      drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
  }
}
</script>

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

<body onload="dropDwnToolTips()">
...
</body>

，或者

<script language="javascript">
window.onload=function() {
    ... script code goes here...
}

或者如果您使用的是dojo，

<script language="javascript">
dojo.ready(function() {
    ... script code goes here...
});

或

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工具提示从下拉列表中选择显示全文

3 个答案: