Dropdown select with images

Question

I wanted to create a dropdown select which has images instead of text as the options   I ve done some Googling and searching here on Stack Overflow  and the answer generally given is to use the jQuery combobox   The problem with this solution  it seems to me  is that you have to provide text   It looks like the images are just icons that accompany that text on the left   Correct me if I m wrong  but this solution wouldn t cover what I m trying to do-- which is completely replace the text with images   Some background on what I m trying to do-- I m trying to create a dropdown for users to select line thickness on an online painting doodling app   The images would be lines of different thickness  kind of like mspaint

User · Answer

I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came across Bootstrap-Select. After some modifications i was able to produce this code.

github repo link here

User · Answer

This is using ms-Dropdown   https   github com marghoobsuleman ms-Dropdown  But data resource is json    Example   http   jsfiddle net tcibikci w3rdhj4s 6  HTML   lt div id  byjson  gt  lt  div gt    Script   lt script gt          var jsonData                  description  Choos your payment gateway   value     text  Payment Gateway                 image  https   via placeholder com 50   description  My life  My card      value  amex   text  Amex                 image  https   via placeholder com 50   description  It pays to Discover      value  Discover   text  Discover                 image  https   via placeholder com 50   title  For everything else      description  For everything else      value  Mastercard   text  Mastercard                 image  https   via placeholder com 50   description  Sorry not available      value  cash   text  Cash on devlivery   disabled true                image  https   via placeholder com 50   description  All you need      value  Visa   text  Visa                 image  https   via placeholder com 50   description  Pay and get paid      value  Paypal   text  Paypal                          byjson   msDropDown  byJson  data jsonData  name  payments2     data  dd           lt  script gt

User · Answer

I am a little to late on this  but you can do this using a simple bootstrap drop down and then do your code on select change event in any language or framework   This is just a very basic solution  for other people like me who are just starting out and looking for a solution for a small simple project     lt div class  dropdown  gt       lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt          Select Image          lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt           lt li gt   lt a style  background-image  url    Content Images Backgrounds background png  height 100px width 300px  class  img-thumbnail  href    gt   lt  a gt  lt  li gt           lt li role  separator  class  divider  gt  lt  li gt           lt li gt   lt a style  background-image  url    Content Images Backgrounds background png  height 100px width 300px  class  img-thumbnail  href    gt   lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

Use combobox and add the following css  ddTitleText  display   none     No more text  just images

User · Answer

Seems like a straightforward html menu would be simpler  Use html5 data attributes for values or whatever method you want to store them and css to handle images as backgrounds or put them in the html itself   Edit  If you are forced to convert from an existing select that you can t get rid of  there are some good plugins as well to modify a select to html  Wijmo and Chosen are a couple that come to mind

User · Answer

Check this example    everything has been done easily http   jsfiddle net GHzfD   EDIT  Updated working as of 2013  July 02  jsfiddle net GHzfD 357   webmenu      width 340px      lt select name  webmenu  id  webmenu  gt       lt option value  calendar  title  http   www abe co nz edit image cache Hamach 300x60c0 JPG  gt  lt  option gt       lt option value  shopping cart  title  http   www nationaldirectory com au sites itchnomore thumbs screenshot2013-01-23at12 05 50pm 300 60 png  gt  lt  option gt       lt option value  cd  title  http   www mitenterpriseforum co uk wp-content uploads 2013 01 MIT EF logo 300x60 jpg  gt  lt  option gt       lt option value  email   selected  selected  title  http   annualreport tacomaartmuseum org sites default files L AnnualReport 300x60 png  gt  lt  option gt       lt option value  faq  title  http   fleetfootmarketing com wp-content uploads 2013 01 Wichita-Apartment-Video-Tours-CTA60-300x50 png  gt  lt  option gt       lt option value  games  title  http   krishnapatrika com images 300x50 pellipandiri300-50 gif  gt  lt  option gt   lt  select gt      body select   msDropDown

User · Answer

If you think about it the concept behind a dropdown select it s pretty simple  For what you re trying to accomplish  a simple  lt ul gt  will do    lt ul id  menu  gt       lt li gt           lt a href     gt  lt img src    alt     gt  lt  a gt   lt  -- Selected -- gt           lt ul gt               lt li gt  lt a href     gt  lt img src    alt     gt  lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt img src    alt     gt  lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt img src    alt     gt  lt  a gt  lt  li gt               lt li gt  lt a href     gt  lt img src    alt     gt  lt  a gt  lt  li gt           lt  ul gt       lt  li gt   lt  ul gt    You style it with css and then some simple jQuery will do  I haven t tried this tho       menu ul li   click function        var  a     this  find  a          this  parents   menu   children  li a   replaceWith  a

User · Answer

PLAIN JAVASCRIPT   DEMO  http   codepen io tazotodua pen orhdp   x000D   x000D  var shownnn    yes   x000D  var dropd   document getElementById  image-dropdown    x000D   x000D  function showww     x000D    dropd style height    auto   x000D    dropd style overflow    y-scroll   x000D    x000D   x000D  function hideee     x000D      dropd style height    30px   x000D      dropd style overflow    hidden   x000D      x000D      dropd addEventListener  mouseover   showOrHide  false   x000D      dropd addEventListener  click  showOrHide   false   x000D   x000D   x000D  function myfuunc imgParent    x000D    hideee    x000D    var mainDIVV   document getElementById  image-dropdown    x000D    imgParent parentNode removeChild imgParent   x000D    mainDIVV insertBefore imgParent  mainDIVV childNodes 0    x000D    x000D   image-dropdown   x000D    display  inline-block  x000D    border  1px solid  x000D    x000D   image-dropdown   x000D    height  30px  x000D    overflow  hidden  x000D    x000D     image-dropdown hover       x000D   x000D   image-dropdown  img holder   x000D    cursor  pointer  x000D    x000D   image-dropdown img flagimgs   x000D    height  30px  x000D    x000D   image-dropdown span iTEXT   x000D    position  relative  x000D    top  -8px  x000D    x000D   lt  -- not tested in mobiles -- gt  x000D   x000D   x000D   lt div id  image-dropdown  onmouseleave  hideee     gt  x000D     lt div class  img holder  onclick  myfuunc this    onmouseover  showww     gt  x000D       lt img class  flagimgs first  src  http   www google com tv images socialyoutube png    gt   lt span class  iTEXT  gt First lt  span gt  x000D     lt  div gt  x000D     lt div class  img holder  onclick  myfuunc this    onmouseover  showww     gt  x000D       lt img class  flagimgs second  src  http   www google com cloudprint learn images icons fiabee png    gt   lt span class  iTEXT  gt Second lt  span gt  x000D     lt  div gt  x000D     lt div class  img holder  onclick  myfuunc this    onmouseover  showww     gt  x000D       lt img class  flagimgs second  src  http   www google com tv images lplay png    gt   lt span class  iTEXT  gt Third lt  span gt  x000D     lt  div gt  x000D     lt div class  img holder  onclick  myfuunc this    onmouseover  showww     gt  x000D       lt img class  flagimgs second  src  http   www google com cloudprint learn images icons cloudprintlite png    gt   lt span class  iTEXT  gt Fourth lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You don t even need javascript to do this   I hope this got you intrigued so here it goes  First  the html structure    lt div id  image-dropdown  gt       lt input type  radio  id  line1  name  line-style  value  1  checked  checked    gt       lt label for  line1  gt  lt  label gt       lt input type  radio  id  line2  name  line-style  value  2    gt       lt label for  line2  gt  lt  label gt           lt  div gt    Whaaat  Radio buttons  Correct  We ll style them to look like a dropdown list with images  because that s what you re after  The trick is in knowing that when labels are correctly linked to inputs  that  for  attribute and target element id   the input will implicitly become active  click on a label   click on a radio button  Here comes comes slightly abbreviated css with comments inline    image-dropdown         style the  box  in its minimzed state       border 1px solid black  width 200px  height 50px  overflow hidden        animate the dropdown collapsing       transition  height 0 1s     image-dropdown hover         when expanded  the dropdown will get native means of scrolling       height 200px  overflow-y scroll        animate the dropdown expanding       transition  height 0 5s     image-dropdown input         hide the nasty default radio buttons        position absolute top 0 left 0 opacity 0     image-dropdown label         style the labels to look like dropdown options       display none  margin 2px  height 46px  opacity 0 2       background url  http   www google com images srpr logo3w png   50  50     image-dropdown hover label        this is how labels render in the  expanded  state       we want to see only the selected radio button in the collapsed menu       and all of them when expanded       display block     image-dropdown input checked   label         tricky  labels immediately following a checked radio button        with our markup they are semantically related  should be fully opaque       and visible even in the collapsed menu       opacity 1  important  display block      Full example here  http   jsfiddle net NDCSR 1   NB1  you ll probably need to use it with position absolute inside a container with position relative  high z-index   NB2  when adding more backgrounds for individual line styles  consider having the selectors based on the  for  attribute of the label like so   label for linestyle2   background-image url

[javascript] Dropdown select with images

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css