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

jQuery- Show images in Drop Down List

Article:
Viewed:  1259 
Posted On:  7/20/2015 8:16:20 PM 
How we can show images in drop down list in asp.net using jQuery ? 

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:

1.png

Image 1.

Now run application:

2.png

Image 2.

3.png

Image 3.

Select any item.

4.png

Image 4.

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