In this article we will explore how to create dropdownlist with images. Selected value can be retrieved in client side as well as in the server side.

Let's see how we can do this.

Step 1: Add below stylesheet and javascript files in the header section of the aspx page.

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/jquery.effects.blind.js"></script>

Step 2: Add below inline stylesheet in the header section of the aspx page.

Step 4: Create a class DDLImage with member variable ddlImgPath, ddlText, ddlId.

public class DDLImage
{
      public string ddlImgPath;
      public string ddlText;
      public int ddlId;
}

Step 5: Create a method GetDDLImage which will return list of DDLImage object.

private List<DDLImage> GetDDLImage()
{
      List<DDLImage> lstDDLImage = new List<DDLImage>();
      DDLImage objDDLImage;

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/ARGENTINA.GIF'/>";
      objDDLImage.ddlText = "ARGENTINA";
      objDDLImage.ddlId = 1;
      lstDDLImage.Add(objDDLImage);

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/AUSTRALIA.GIF'/>";
      objDDLImage.ddlText = "AUSTRALIA";
      objDDLImage.ddlId = 2;
      lstDDLImage.Add(objDDLImage);

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/CANADA.GIF'/>";
      objDDLImage.ddlText = "CANADA";
      objDDLImage.ddlId = 3;
      lstDDLImage.Add(objDDLImage);

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/EGYPT.GIF'/>";
      objDDLImage.ddlText = "EGYPT";
      objDDLImage.ddlId = 4;
      lstDDLImage.Add(objDDLImage);

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/INDIA.GIF'/>";
      objDDLImage.ddlText = "INDIA";
      objDDLImage.ddlId = 5;
      lstDDLImage.Add(objDDLImage);

      objDDLImage = new DDLImage();
      objDDLImage.ddlImgPath = "<img class='ddlImg' src='Flags/IRELAND.GIF'/>";
      objDDLImage.ddlText = "IRELAND";
      objDDLImage.ddlId = 6;
      lstDDLImage.Add(objDDLImage);

      return lstDDLImage;
}

Step 6: Place below Page_Load method in the code behind.

protected void Page_Load(object sender, EventArgs e)
{
      Literal ltr = new Literal();
      List<DDLImage> lstDDLImage = GetDDLImage();
      for (int i = 0; i < lstDDLImage.Count; i++)
      {
            ltr.Text = ltr.Text + "<span class='ddlText' id='" + lstDDLImage[i].ddlId + "' onclick='GetSelectedValue(this);'>" + lstDDLImage[i].ddlImgPath + lstDDLImage[i].ddlText + "</span>" + "<br/>";
      }
      effect.Controls.Add(ltr);
}

Step 7: Place below javascript in the aspx page.

<script language="javascript" type="text/javascript">
      $(document).ready(function() {
            $("#ddlDiv").css({
                  display: 'block'
            });

            $("#effect").hide();
            //run the currently selected effect

            function runEffect() {
                  //get effect type from
                  if (!($('#effect').is(":visible"))) {
                        //run the effect
                        $("#effect").show('blind', 200);
                  }
                  else {
                        $("#effect").hide('blind', 200);
                  }
            };

            //set effect from image dropdown value
            $("#ddlArrow").click(function() {
                  runEffect();
                  return false;
            });

            $(document).click(function(e) { 
                  if (($('#effect').is(":visible"))) 
                  { 
                        $("#effect").hide('blind', 200); 
                  } 
            });

            $('#effect').click(function(e) {
                  e.stopPropagation();
            });
      });

      function GetSelectedValue(ddlId) {
            var objTextBox = document.getElementById("<%=txtChkValue.ClientID%>");
            objTextBox.value = $(ddlId).text();
            if (!($('#effect').is(":visible"))) {
            //run the effect
                  $("#effect").show('blind', 200);
            }
            else {
                  $("#effect").hide('blind', 200);
            }

            $("#<%=lblClientValue.ClientID%>").html($(ddlId).attr("id"));
            $("#<%=lblServerValue.ClientID%>").html(');
            $("#<%=hidValue.ClientID%>").val($(ddlId).attr("id"));
      }

</script>

Step 8: Place button click method in the code behind to get selected value in the server side.

protected void btnGet_Click(object sender, EventArgs e)
{
      lblServerValue.Text = hidValue.Value;
}

Live Demo

This ends the article of dropdownlist with images.