當鼠標懸停在DropDownList項目上時顯示圖片ASP.NET

-1

編輯顯然你不能做我想到的，我沒有發現我的問題的解決方案。當鼠標懸停在DropDownList項目上時顯示圖片ASP.NET

我目前正在學習ASP.NET，並且我想將圖片與來自asp：DropDownList的每個項目關聯起來。我使用C＃作爲編程語言和ASP.NET WebForm。

的什麼，我試圖做例子：

當用戶打開一個DropDownList，並徘徊通過其項目，在某種PictureBox中的我想顯示的每個項目的相關圖像。

想象一下DropDownList包含：Dog，Cat，Lion。

當用戶打開DropDownList並懸停在這些項目上時，DropDownList旁邊會顯示一條狗，一隻貓或一隻獅子。

我不希望使用DropDownList的SelectedIndexChanged事件，因爲只有在選擇了選項後纔會觸發該事件。

謝謝！

還有一件事，我知道我應該使用jQuery或/和CSS，但請具體如果你有一個解決方案。

來源

2016-07-28 AdamK

您使用了術語「懸停」，並用'javascript'標記了問題，因此您必須知道從哪裏開始。如果您嘗試並顯示您的代碼，您將獲得更多幫助。 – Crowcoder

你可以做這樣的事情......

在代碼隱藏通過他們添加的項目將DropDownList和循環添加自定義屬性imageName：

DropDownList1.Items.Insert(0, new ListItem("Dog", "Dog", true)); 
DropDownList1.Items.Insert(1, new ListItem("Cat", "Cat", true)); 
DropDownList1.Items.Insert(2, new ListItem("Lion", "Lion", true)); 

string[] imageArray = new string[] { "dog.jpg", "cat.jpg", "lion.jpg" }; 
int i = 0; 
foreach (ListItem item in DropDownList1.Items) 
{ 
    item.Attributes.Add("imageName", imageArray[i]); 
    i++; 
}

再上。 aspx頁面綁定懸停功能DropDownList的選項，以顯示圖像：

<script> 
$(document).ready(function() { 
    $("#<%=DropDownList1.ClientID %> option").hover(function (event) { 
     var image = $(this).attr("imageName"); 
     document.getElementById('imagePanel').innerHTML = '<img src="' + image + '">'; 
    }); 
}); 
</script> 

<div id="imagePanel"></div> 
<br /> 
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

您可能需要添加hoverIntent到腳本延遲的加載徘徊時的圖像。

來源

2016-07-28 12:21:31 VDWWD

顯然，您不能將懸停事件添加到DropDownList元素。 – AdamK

當鼠標懸停在DropDownList項目上時顯示圖片ASP.NET

回答

相關問題