Fatal编程技术网
  • javascript/
  • Javascript 如何向下拉/组合框添加工具提示？

Javascript 如何向下拉/组合框添加工具提示？

javascript jquery drop-down-menu

Javascript 如何向下拉/组合框添加工具提示？,javascript,jquery,drop-down-menu,tooltip,Javascript,Jquery,Drop Down Menu,Tooltip,我必须为下拉菜单实现工具提示功能。此外，工具提示将不会是任何静态文本，它应该是下拉列表的选定值。 如何在jQuery中实现这一点？您可以在javascript中将下拉菜单作为div实现。一旦实现了，您可以使用类似以下内容添加工具提示：类似的内容 selectElement.addEventListener('change', function (e) { selectElement.title = selectElement.value; }); 我得到了答案： 万一你想知道我是怎么做到的

我必须为下拉菜单实现工具提示功能。此外，工具提示将不会是任何静态文本，它应该是下拉列表的选定值。
如何在jQuery中实现这一点？

您可以在javascript中将下拉菜单作为div实现。一旦实现了，您可以使用类似以下内容添加工具提示：

类似的内容

selectElement.addEventListener('change', function (e) {
  selectElement.title = selectElement.value;
});
我得到了答案：

万一你想知道我是怎么做到的：-

jQuery('#myDropDownID').hover(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12; 
                jQuery("body").append("<div id='myTooltip' class='portal-tool-tip' style='position: absolute; z-index: 100; display: none;'>" + jQuery("OPTION:selected", this).text()  + "</div>");
                if(jQuery.browser.msie) var tipWidth = jQuery("#myTooltip").outerWidth(true)
                else var tipWidth = jQuery("#myTooltip").width()
                jQuery("#myTooltip").width(tipWidth);
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            }, function(){
                jQuery("#myTooltip").remove();              
            }).mousemove(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                var tipWidth = jQuery("#myTooltip").outerWidth(true);
                var tipHeight = jQuery("#myTooltip").outerHeight(true);
                if(tipX + tipWidth > jQuery(window).scrollLeft() + jQuery(window).width()) tipX = e.pageX - tipWidth;
                if(jQuery(window).height()+jQuery(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            });

jQuery（'#myDropDownID'）.hover（函数（e）{
var tipX=e.pageX+12；
var tipY=e.pageY+12；
jQuery（“body”）.append（“+jQuery（“选项：已选择”，this.text（）+”）；
if（jQuery.browser.msie）var tipWidth=jQuery（“#myTooltip”）.outerWidth（true）
else var tipWidth=jQuery（#myTooltip”）.width（）
jQuery（“#myTooltip”）.width（tipWidth）；
jQuery（“#myTooltip”）.css（“左”，tipX.css（“顶”，tipY.fadeIn）（“中”）；
}，函数（）{
jQuery（“#myTooltip”）.remove（）；
}).mousemove（函数（e）{
var tipX=e.pageX+12；
var tipY=e.pageY+12；
var tipWidth=jQuery（#myTooltip”）.outerWidth（true）；
var tipHeight=jQuery（#myTooltip”）.outerHeight（true）；
如果（tipX+tipWidth>jQuery（window.scrollLeft（）+jQuery（window.width（））tipX=e.pageX-tipWidth；
if（jQuery（window）.height（）+jQuery（window）.scrollTop（）
请看这里：

您可以尝试使用JAVASCRIPT和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>


函数dropDwnToolTips（）{
var drpdwnlst=document.getElementsByTagName（“选择”）；

对于（i=0；iis，没有其他方法可以代替为drop downAlsciende创建div，这不是我所期望的。：）。工具提示必须以良好的方式显示。浏览器显示的标题看起来不太好。工具提示：嗯，我想您可以调用自己的工具提示api，而不是“.title”。

<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...
}



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



$(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; }; 
    }); 
});