Post
Ask Question

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:

  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.


Similar Articles