Show Images in DropDownList Using jQuery

For this I need to have jquery.ddslick.min.js in my solution.

The following 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"
},
{
text: "c-SharpCorner",
value: 4,
description: "A Community For Professional",
imageSrc: "Social/cSharp.png"
}
];
$('#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>