代码之家 › 专栏 › 技术社区 › rob waminal

带工具提示的绑定DropDownList

drop-down-menu asp.net c#

rob waminal · 技术社区 · 14 年前

嗨,我有一个DropDownlist,它是从代码后面绑定的。我怎么用 DataTextField 作为DropDownList的工具提示?

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

我想要有界场 DisplayString 也在工具提示中绑定。如果不使用 DataBound DropDownList事件?

5 回复 | 直到 10 年前

takrl 13 年前

只需在下拉列表绑定后调用该函数: 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);
    }
}

Geeth 14 年前

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

http://www.dotnetspider.com/resources/5099-Tool-tip-for-DropDownList-ASP-NET.aspx

Praveen Mitta 10 年前

下面的代码可以工作,需要在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);
    }
}

Myra 14 年前

好吧,有了一些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";
}

最后一部分是将鼠标悬停事件添加到DropDownList

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

然后它就可以工作了。您可能需要为工具提示添加额外的样式。
希望这有帮助
玛拉

FunMatters 12 年前

以下是我目前使用的3个示例!首先使用标准选择。第二种方法是使用带有外部数据源的ASP.NET DropDownList。第三个最简单的方法是,使用jquery on下拉菜单(select)click事件动态添加工具提示(title属性)。

  <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下拉列表(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函数绑定工具提示只要打个电话

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

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