Question

修改显然你不能做我想到的，我找不到解决问题的方法。

我目前正在学习ASP.NET，我想将图片与asp：DropDownList中的每个项目相关联。我使用C＃作为编程语言，使用ASP.NET WebForm。

我想要做的例子：

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

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

当用户打开DropDownList并将鼠标悬停在这些项目上时，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，以便在悬停时延迟加载图片。

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

1 个答案: