与工具提示绑定的 DropDownList

Question

您好，我有一个由后面的代码限制的 DropDownList。如何使用 DataTextField 作为 DropDownList 的工具提示？

DropDownList list = this.DropDownList1;
list.DataSource = GetData();
list.DataTextField = "DisplayString";
list.DataValueField = "DataValue";
list.DataBind();

我希望有界字段 DisplayString 在工具提示中也有界。不使用 DropDownList 的 DataBound 事件是否可以实现？

Answer 1

只需在下拉列表绑定后调用该函数即可：BindTooltip(Name of the dropdownlist);

public void BindTooltip(ListControl lc)
{
    for (int i = 0; i < lc.Items.Count; i++)
    {
        lc.Items[i].Attributes.Add("title", lc.Items[i].Text);
    }
}

Answer 2

http://www.codeproject.com/KB/aspnet/List_Box_Tool_Tip.aspx

http://www.dotnetspider.com/resources /5099-工具提示-for-DropDownList-ASP-NET.aspx

Answer 3

下面的代码可以工作，需要在 PageLoad 中调用此方法并将下拉列表传递给您想要工具提示的方法

 protected void Page_Load(object sender, EventArgs e)
 {
    BindToolTip(ddlProjects);
}

下面是实际的方法：

private void BindToolTip(ListControl list)
{
    foreach (ListItem item in list.Items)
    {
        item.Attributes.Add("title", item.Text);
    }
}

Answer 4

好吧，通过一些 javascript 工作，这是很有可能的。

首先，您在 html 端创建一个带有鼠标移出事件的 div

<div id="tooltip" style="display:none;" onmouseout="hidetooltip();"></div>

，然后需要一些 JavaScript 工作来确保当您将鼠标悬停

function showtooltip(element) {
   //select focused elements content to show in tooltip content
   document.getElementById("tooltip").innerHTML = 
          element.options[element.selectedIndex].text;
   //show tooltip
   document.getElementById("tooltip").style.display = "block";
}

function hidetooltip() {
   //hide tooltip
   document.getElementById("tooltip").style.display = "none";
}

在下拉列表项上时，它会显示工具提示。最后一部分是将鼠标悬停和移出事件添加到您的下拉列表中，

<asp:DropDownList ... onmouseover="showtooltip(this)" 
                      onmouseout="hidetooltip()" ... >

然后它应该可以工作。您可能需要为工具提示添加额外的样式。

希望这有帮助
迈拉

Answer 5

这是我目前正在使用的 3 个示例！首先使用标准选择。
其次，将 Asp.net Dropdownlist 与外部数据源一起使用。第三个最简单的方法是，在下拉（选择）单击事件上使用 jQuery 动态添加工具提示（标题属性）。

1）

  <select id="testTitleDrop">
   <option value="1">Tea</option>
   <option value="2">Coffee</option>
   <option value="3">Chocolate</option>
   <option value="4">IceTea</option>
</select>

使用一点 jQuery：

$(document).ready(function () {
 $('#testTitleDrop').find("option:[title='']").each(function () {
 $(this).attr("title",$(this).text());

});
})

2）。
/* 对于 Asp DropDown (Dropdownlist) 从数据库填充值！*/

<asp:DropDownList runat="server" 
DataSourceID="SqlDataSource1" 
AutoPostBack="true" 
ToolTip=""  
DataTextField="SectionName"
DataValueField="SectionID"
ID="DropPlaceofInsert"
AppendDataBoundItems="true"  onselectedindexchanged="DropPlaceofInsert_SelectedIndexChanged"  >
     <asp:ListItem Text="" Value="-1" Selected="True" />
</asp:DropDownList>
<%--DataSource --%>            
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:RegistryConnectionString %>" 
  SelectCommand="SELECT * FROM [Section] where rtrim(ltrim(sectionname)) <> ''    ORDER BY [SectionName]">
</asp:SqlDataSource>

另一种从另一个 Js 函数绑定 Tooltip 的方法，而不是在页面加载时
....只需致电

addToolTipToDropDown($('#DropPlaceofInsert'));

...

function addToolTipToDropDown(el)
 {
     $(el).find("option:[title='']").each(function () {
           $(this).attr("title",$(this).text());
        });  
 }

---

3)
或者更简单，只需添加以下代码即可！：

// Assign Tooltip value on click of dropdown list  //    
  $(document).ready(function () {
    try{  
     $('select').click(function (el) {    
         $(this).find("option:[title='']").each(function (el) {       
                                   $(this).attr("title",$(this).text());
         })                
      });
    }
    catch(e)
{
    alert(e);
}

- 希望这有助于节省一些开发人员的时间！