Putting images with options in a dropdown list

Question

I was trying to insert images in a drop down list  I tried the following code but its not working  What is the best way to achieve this    lt select gt     lt option value  volvo  gt  lt IMG src  a jpg HEIGHT  15  WIDTH  15  BORDER  0 align  center  gt Volvo lt  option gt     lt option value  saab  gt  lt IMG src  b jpg HEIGHT  15  WIDTH  15  BORDER  0 align  center  gt Saab lt  option gt     lt option value  mercedes  gt  lt IMG src  c jpg HEIGHT  15  WIDTH  15  BORDER  0 align  center  gt Mercedes lt  option gt     lt option value  audi  gt  lt IMG src  d jpg HEIGHT  15  WIDTH  15  BORDER  0 align  center  gt Audi lt  option gt   lt  select gt

User · Answer

Checkout And Run The Following Code  It will help you      x000D   x000D      function     x000D        widget   custom iconselectmenu     ui selectmenu    x000D         renderItem  function  ul  item     x000D          var li        lt li gt      x000D            wrapper        lt div gt      text  item label      x000D    x000D          if   item disabled     x000D            li addClass   ui-state-disabled     x000D            x000D    x000D               lt span gt      x000D            style  item element attr   data-style     x000D             class    ui-icon     item element attr   data-class    x000D             x000D             appendTo  wrapper    x000D    x000D          return li append  wrapper   appendTo  ul    x000D          x000D          x000D    x000D           filesA    x000D         iconselectmenu   x000D         iconselectmenu   menuWidget    x000D           addClass   ui-menu-icons     x000D    x000D           filesB    x000D         iconselectmenu   x000D         iconselectmenu   menuWidget    x000D           addClass   ui-menu-icons customicons     x000D    x000D           people    x000D         iconselectmenu   x000D         iconselectmenu   menuWidget   x000D           addClass   ui-menu-icons avatar     x000D         x000D     lt  script gt  x000D     lt style gt  x000D      h2   x000D        margin  30px 0 0 0  x000D        x000D      fieldset   x000D        border  0  x000D        x000D      label x000D    x000D        display  block  x000D        x000D    x000D         select with custom icons    x000D       ui-selectmenu-menu  ui-menu customicons  ui-menu-item-wrapper   x000D        padding  0 5em 0 0 5em 3em  x000D        x000D       ui-selectmenu-menu  ui-menu customicons  ui-menu-item  ui-icon   x000D        height  24px  x000D        width  24px  x000D        top  0 1em  x000D        x000D       ui-icon video   x000D        background  url  images 24-video-square png   0 0 no-repeat  x000D        x000D       ui-icon podcast   x000D        background  url  images 24-podcast-square png   0 0 no-repeat  x000D        x000D       ui-icon rss   x000D        background  url  images 24-rss-square png   0 0 no-repeat  x000D        x000D    x000D         select with CSS avatar icons    x000D      option avatar   x000D        background-repeat  no-repeat  important  x000D        padding-left  20px  x000D        x000D       avatar  ui-icon   x000D        background-position  left top  x000D        x000D   lt link href    code jquery com ui 1 12 1 themes base jquery-ui css  rel  stylesheet   gt  x000D   lt script src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt  x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt title gt jQuery UI Selectmenu - Custom Rendering lt  title gt  x000D     x000D   lt  head gt  x000D   lt body gt  x000D    x000D   lt div class  demo  gt  x000D    x000D   lt form action     gt  x000D     lt h2 gt Selectmenu with framework icons lt  h2 gt  x000D     lt fieldset gt  x000D       lt label for  filesA  gt Select a File  lt  label gt  x000D       lt select name  filesA  id  filesA  gt  x000D         lt option value  jquery  data-class  ui-icon-script  gt jQuery js lt  option gt  x000D         lt option value  jquerylogo  data-class  ui-icon-image  gt jQuery Logo lt  option gt  x000D         lt option value  jqueryui  data-class  ui-icon-script  gt ui jQuery js lt  option gt  x000D         lt option value  jqueryuilogo  selected  selected  data-class  ui-icon-image  gt jQuery UI Logo lt  option gt  x000D         lt option value  somefile  disabled  disabled  data-class  ui-icon-help  gt Some unknown file lt  option gt  x000D       lt  select gt  x000D     lt  fieldset gt  x000D    x000D     lt h2 gt Selectmenu with custom icon images lt  h2 gt  x000D     lt fieldset gt  x000D       lt label for  filesB  gt Select a podcast  lt  label gt  x000D       lt select name  filesB  id  filesB  gt  x000D         lt option value  mypodcast  data-class  podcast  gt John Resig Podcast lt  option gt  x000D         lt option value  myvideo  data-class  video  gt Scott Gonz  lez Video lt  option gt  x000D         lt option value  myrss  data-class  rss  gt jQuery RSS XML lt  option gt  x000D       lt  select gt  x000D     lt  fieldset gt  x000D    x000D     lt h2 gt Selectmenu with custom avatar 16x16 images as CSS background lt  h2 gt  x000D     lt fieldset gt  x000D       lt label for  people  gt Select a Person  lt  label gt  x000D       lt select name  people  id  people  gt  x000D         lt option value  1  data-class  avatar  data-style  background-image  url  amp apos http   www gravatar com avatar b3e04a46e85ad3e165d66f5d927eb609 d monsterid amp amp r g amp amp s 16 amp apos     gt John Resig lt  option gt  x000D         lt option value  2  data-class  avatar  data-style  background-image  url  amp apos http   www gravatar com avatar e42b1e5c7cfd2be0933e696e292a4d5f d monsterid amp amp r g amp amp s 16 amp apos     gt Tauren Mills lt  option gt  x000D         lt option value  3  data-class  avatar  data-style  background-image  url  amp apos http   www gravatar com avatar bdeaec11dd663f26fa58ced0eb7facc8 d monsterid amp amp r g amp amp s 16 amp apos     gt Jane Doe lt  option gt  x000D       lt  select gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D    x000D   lt  div gt  x000D    x000D    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This code will work only in Firefox    lt select gt       lt option value  volvo  style  background-image url images volvo png    gt Volvo lt  option gt       lt option value  saab   style  background-image url images saab png    gt Saab lt  option gt       lt option value  honda  style  background-image url images honda png    gt Honda lt  option gt       lt option value  audi   style  background-image url images audi png    gt Audi lt  option gt   lt  select gt      Edit  April 2018       Firefox does not support this anymore

User · Answer

I have found a crossbrowser compatible JQuery plugin here    http   designwithpc com Plugins ddSlick  probably useful in this scenario

User · Answer

You can t do that in plain HTML  but you can do it with jQuery   JavaScript Image Dropdown Are you tired with your old fashion dropdown  Try this new one  Image combo box  You can add an icon with each option  It works with your existing  quot select quot  element or you can create by JSON object

User · Answer

I found a lot of people recommending ddSlick js it seems to be a really cool option   unfortunately it doesnt work as expected for me  maybe I didn t know how to integrate it  today I discovered a library like bootstrap named   MaterialiseCss so I returned to this section to help    https   materializecss com select html  https   materializecss com dropdown html

User · Answer

This is exactly what you need  See it in action here 8FydL 445  Example s Code below    x000D   x000D           dropdown img flag   addClass  flagvisibility    x000D              dropdown dt a   click function     x000D                  dropdown dd ul   toggle    x000D              x000D                       x000D              dropdown dd ul li a   click function     x000D              var text     this  html    x000D                  dropdown dt a span   html text   x000D                  dropdown dd ul   hide    x000D                  result   html  Selected value is      getSelectedValue  sample     x000D              x000D                       x000D          function getSelectedValue id    x000D              return         id  find  dt a span value   html    x000D            x000D       x000D            document  bind  click   function e    x000D              var  clicked     e target   x000D              if     clicked parents   hasClass  dropdown    x000D                      dropdown dd ul   hide    x000D              x000D       x000D              dropdown img flag   toggleClass  flagvisibility    x000D       desc   color  6b6b6b   x000D       desc a  color  0092dd   x000D       x000D       dropdown dd   dropdown dt   dropdown ul   margin 0px  padding 0px    x000D       dropdown dd   position relative    x000D       dropdown a   dropdown a visited   color  816c5b  text-decoration none  outline none   x000D       dropdown a hover   color  5d4617   x000D       dropdown dt a hover   color  5d4617  border  1px solid  d0c9af   x000D       dropdown dt a  background  e4dfcb url  http   www jankoatwarpspeed com wp-content uploads examples reinventing-drop-down arrow png   no-repeat scroll right center  display block  padding-right 20px  x000D                      border 1px solid  d4ca9a  width 150px   x000D       dropdown dt a span  cursor pointer  display block  padding 5px   x000D       dropdown dd ul   background  e4dfcb none repeat scroll 0 0  border 1px solid  d4ca9a  color  C5C0B0  display none  x000D                        left 0px  padding 5px 0px  position absolute  top 2px  width auto  min-width 170px  list-style none   x000D       dropdown span value   display none   x000D       dropdown dd ul li a   padding 5px  display block   x000D       dropdown dd ul li a hover   background-color  d0c9af   x000D       x000D       dropdown img flag   border none  vertical-align middle  margin-left 10px    x000D       flagvisibility   display none   x000D        lt script src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  type  text javascript  gt  lt  script gt  x000D           lt dl id  sample  class  dropdown  gt  x000D               lt dt gt  lt a href     gt  lt span gt Please select the country lt  span gt  lt  a gt  lt  dt gt  x000D               lt dd gt  x000D                   lt ul gt  x000D                       lt li gt  lt a href     gt Brazil lt img class  flag  src  http   www jankoatwarpspeed com wp-content uploads examples reinventing-drop-down br png  alt      gt  lt span class  value  gt BR lt  span gt  lt  a gt  lt  li gt  x000D                       lt li gt  lt a href     gt France lt img class  flag  src  http   www jankoatwarpspeed com wp-content uploads examples reinventing-drop-down fr png  alt      gt  lt span class  value  gt FR lt  span gt  lt  a gt  lt  li gt  x000D                      x000D                   lt  ul gt  x000D               lt  dd gt  x000D           lt  dl gt  x000D           lt span id  result  gt  lt  span gt  x000D   x000D   x000D

User · Answer

folks  I got this Bootstrap dropdown working  I modified the click event slightly in order to keep the currently-selected image  And as you see  the USD currency is the default selected     lt div class  btn-group  style  margin 10px   gt      lt  -- CURRENCY  BOOTSTRAP DROPDOWN -- gt                   lt  -- lt a class  btn btn-primary  href  javascript void 0    gt Currency lt  a gt -- gt                                       lt a class  btn btn-primary dropdown-toggle  data-toggle  dropdown  href     gt  lt img src        Images flag-usd-small png  gt  USD  lt span class  caret  gt  lt  span gt  lt  a gt                   lt ul class  dropdown-menu  gt                       lt li gt  lt a href  javascript void 0    gt                           lt img src        Images flag-aud-small png    gt  AUD lt  a gt                       lt  li gt                       lt li gt  lt a href  javascript void 0    gt                           lt img src        Images flag-cad-small png    gt  CAD lt  a gt                       lt  li gt                       lt li gt  lt a href  javascript void 0    gt                           lt img src        Images flag-cny-small png    gt  CNY lt  a gt                       lt  li gt                       lt li gt  lt a href  javascript void 0    gt                           lt img src        Images flag-gbp-small png    gt  GBP lt  a gt                       lt  li gt                       lt li gt  lt a href  javascript void 0    gt                           lt img src        Images flag-usd-small png    gt  USD lt  a gt                       lt  li gt                   lt  ul gt               lt  div gt       BOOTSTRAP DROPDOWN MENU - Update selected item text and image        dropdown-menu li a   click function          var selText     this  text        var imgSource     this  find  img   attr  src        var img     lt img src      imgSource       gt                  this  parents   btn-group   find   dropdown-toggle   html img         selText      lt span class  caret  gt  lt  span gt

User · Answer

You need to achieve that using CSS  http   binnyva blogspot com 2006 01 icons-for-select-menu-options-in html

[html] Putting images with options in a dropdown list

Examples related to html

Examples related to html-select