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

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

我目前正在学习ASP.NET，我想将一张图片与ASP:DropDownList中的每个项目相关联。我使用C#作为编程语言，使用ASP.NET网络表单

我正在尝试做的示例：

当用户打开一个DropDownList，并将鼠标悬停在它的项目上时，在某种图片框中，我想显示每个项目的关联图像

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

当用户打开DropDownList并将鼠标悬停在这些项目上时，DropDownList旁边会显示狗、猫或狮子

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

谢谢大家!

---

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

您可以这样做

在“代码隐藏”中，将项目添加到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>

$（文档）.ready（函数（）{
$（“#选项”）.hover（函数（事件）{
var image=$（this.attr（“imageName”）；
document.getElementById（'imagePanel'）。innerHTML=''；
});
});


您使用了术语“hover”，并用
javascript
标记了问题，因此您必须知道从何处开始。如果您尝试并显示代码，您将获得更多帮助。显然，您无法向DropDownList元素添加悬停事件。