将鼠标悬停在DropDownList项目ASP.NET上时显示图片

Question

编辑显然你做不到我想的，我找不到解决问题的办法。

我目前正在学习ASP.NET，我想将图片与ASP:DropDownList中的每个项目关联起来。我使用C#作为编程语言，并使用ASP.NET WebForm。

我尝试做的事情的例子：

当用户打开DropDownList并在其项目中悬停时，我希望在某种图片框中显示每个项目的关联图像。

想象一下，一个下拉列表包含：狗、猫、狮子。

当用户打开下拉列表并悬停在这些项目上时，下拉列表旁边会显示一只狗、一只猫或一只狮子。

我不希望使用DropDownList的SelectedIndexChanged事件，因为它只有在选择选项后才会触发。

谢谢！

还有一件事，我知道我应该使用jQuery或/和CSS，但如果你有解决方案，请具体说明。

Answer 1

您可以这样做。。。

在代码后面，将项目添加到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添加到脚本中，以在悬停时延迟加载图像。