Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

jQuery- Show images in Drop Down List

Viewed:  2428 
Posted On:  20/07/2015 20:16:20 
How we can show images in drop down list in using jQuery ? 

In this article I am going to show how we can show Images in drop down list in 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="">
<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"

                data: ddlData,
                width: 300,
                imagePosition: "left",
                onSelected: function (selectedData) {
                    //Write your logic on Selection index change.                   
    <form id="form1">
            <div id="ddlSocial"></div>

Below is the Image and script in my solution:


Image 1.

Now run application:


Image 2.


Image 3.

Select any item.


Image 4.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us