jQuery的工具提示中顯示在下拉菜單中選擇值

全文我怎樣才能實現的東西如下：jQuery的工具提示中顯示在下拉菜單中選擇值

http://easylistbox.com/demoDropDownToolTip.html

jquery的提示？我有一個例子，請

來源

2012-01-11 learning

在頁面上提到了一個工具提示，但我看到的只是一個標準的HTML「select」控件？ – 2012-01-11 10:15:06

@Abbas我在問是否可以使用JQUERY TOOLTIP來實現這一點 – learning 2012-01-11 10:17:44

對於急躁的回覆感到抱歉，我沒有看到jQuery部分，所以我刪除了我的評論。我發佈了一個答案，這個例子中的純JavaScript代碼翻譯成了jQuery。 – Abbas 2012-01-11 10:41:25

假設你正在使用提供here工具提示插件，下面的代碼應該做你需要什麼：

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

這裏當然，test將是你select的id屬性。看看小提琴here。

來源

2012-01-11 12:05:24 burnedikt

鏈接已損壞。 – Bharat 2017-03-17 17:17:40

假設你的option元素的ID設置爲"lstMovies"，你需要做的是顯示和隱藏工具提示div上mouseover和mouseout事件。

$("#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。

來源

2012-01-11 10:45:13 Abbas

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>

在下面的代碼我是在下降中的所有值添加提示下，以及選擇的值。這在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... 
}

，或者如果您使用的道場，

<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事件上使用函數，而不是文檔就緒事件。

來源

2013-01-30 04:10:13 AZD

jQuery的工具提示中顯示在下拉菜單中選擇值

回答

相關問題