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

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時(shí)間: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庫(kù)文件

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

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

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

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

您可能對(duì)以下文章也感興趣

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