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

The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryImagesInDropDown.Default" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>jQuery: Showing Images in Drop Down List</title>
  6. <script src="Scripts/jquery-2.1.4.min.js"></script>
  7. <script src="Scripts/jquery.ddslick.min.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10. var ddlData = [
  11. {
  12. text: "Facebook",
  13. value: 1,
  14. description: "Facebook",
  15. imageSrc: "Social/facebook.png"
  16. },
  17. {
  18. text: "Twitter",
  19. value: 2,
  20. description: "Twitter",
  21. imageSrc: "Social/twitter.png"
  22. },
  23. {
  24. text: "LinkedIn",
  25. value: 3,
  26. description: "LinkedIn",
  27. imageSrc: "Social/linkedin.png"
  28. },
  29. {
  30. text: "Google+",
  31. value: 3,
  32. description: "Google+",
  33. imageSrc: "Social/GooglePlus2.jpg"
  34. },
  35. {
  36. text: "c-SharpCorner",
  37. value: 4,
  38. description: "A Community For Professional",
  39. imageSrc: "Social/cSharp.png"
  40. }
  41. ];
  42. $('#ddlSocial').ddslick({
  43. data: ddlData,
  44. width: 300,
  45. imagePosition: "left",
  46. onSelected: function (selectedData) {
  47. //Write your logic on Selection index change.
  48. }
  49. });
  50. });
  51. </script>
  52. </head>
  53. <body>
  54. <form id="form1">
  55. <div>
  56. <div id="ddlSocial"></div>
  57. </div>
  58. </form>
  59. </body>
  60. </html>
The following is the image and script in my solution:

Script
Figure 1.

Now run application:

facebook
Figure 2.

select item
Figure 3.

Select any item.

Linkedin
Figure 4.

C sharp corner
Figure 5.