Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Custom Dropdown with Images using jQuery ddSlick Plugin

Apr 6, 2014
Introduction
  
Here I will explain how to use jQuery to add images to dropdown list items using ddslick jQuery plugin or jQuery bind dropdownlist options with images like showing country names with country flags using ddslick jQuery plugin. Ddslick is a jQuery plugin to create custom dropdown with images.


To implement this functionality first create website and write following code in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Dropdown with images using ddslick plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.ddslick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var ddlData = [
{
text: "Facebook",
value: 1,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$('#ddimages').ddslick({
data: ddlData,
width: 300,
imagePosition: "left",
onSelected: function(selectedData) {
//callback function: do something with selectedData;
}
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="ddimages"></div>
</div>
</form>
</body>
</html>

If you observe above code in header section I added jquery.ddslick.min.js file by using this we can implement custom dropdown with images. If you want to add images to dropdown you need to define like this $('#ddimages').ddslick()”. If you want these files you can get it from downloadable folder or from here ddSlick plugin

Once you completed all the coding run your application and check your output that will be like as shown below

Demo


Download sample code attached 


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

7 comments :

SANJAYA said...

nice article again. ..

Anonymous said...

As usual awesome....

Anonymous said...

nice one ...keep posting like this

Unknown said...
This comment has been removed by the author.
Unknown said...

how can i set the selected item by default using java script

Unknown said...
This comment has been removed by the author.
Unknown said...

How do i add contents dynamically ?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.