技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

下拉菜單/下拉列表鼠標(biāo)提示ToolTip【JQuery實現(xiàn)】

作者:admin    時間:2019-8-26 15:46:7    瀏覽:

本文介紹如何使用JQuery給下拉菜單/下拉列表增加鼠標(biāo)提示(ToolTip)。

下拉列表增加鼠標(biāo)提示

下拉列表增加鼠標(biāo)提示

下拉列表增加鼠標(biāo)提示

html代碼

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<select id="ddlFruits" style="width: 150px;">
  <option value="0">Please Select</option>
  <option value="1">John Hammond</option>
  <option value="2">Mudassar Khan</option>
  <option value="3">Suzanne Mathews</option>
  <option value="4">Robert Schidner</option>
</select>

<script type="text/javascript">
$(function () {
  $("[id*=ddlFruits] option").each(function (i) {
    if (i > 0) {
      var title = "Customer ID: " + $(this).val();
      $(this).attr("title", title);
    }
  });
});
</script>

</body>
</html>

效果如圖：

下拉列表增加鼠標(biāo)提示

下拉列表增加鼠標(biāo)提示

execcodegetcode

解釋：

1、調(diào)用JQuery庫文件

首先務(wù)必先調(diào)用JQuery庫文件，推薦使用百度公共庫文件。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2、JQuery實現(xiàn)程序

  • 使用each()函數(shù)遍歷下拉列表所有選項（option）
  • 使用val()函數(shù)獲得選項值（value）
  • 使用attr()函數(shù)給選項添加title屬性

您可能對以下文章也感興趣

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */