In this article I am going to show how we can show
Images in drop down list in asp.net using jQuery. For this I need to have jquery.ddslick.min.js in my
solution.
Below is my aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryImagesInDropDown.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery: Showing Images in Drop Down List</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery.ddslick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var ddlData = [
{
text: "Facebook",
value: 1,
description: "Facebook",
imageSrc: "Social/facebook.png"
},
{
text: "Twitter",
value: 2,
description: "Twitter",
imageSrc: "Social/twitter.png"
},
{
text: "LinkedIn",
value: 3,
description: "LinkedIn",
imageSrc: "Social/linkedin.png"
},
{
text: "Google+",
value: 3,
description: "Google+",
imageSrc: "Social/GooglePlus2.jpg"
}
];
$('#ddlSocial').ddslick({
data: ddlData,
width: 300,
imagePosition: "left",
onSelected: function (selectedData) {
//Write your logic
on Selection index change.
}
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="ddlSocial"></div>
</div>
</form>
</body>
</html>
Below is the Image and script in my solution:
Image 1.
Now run application:
Image 2.
Image 3.
Select any item.
Image 4.