CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben G
Ben G

Reputation: 26789

Dropdown select with images

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.

Upvotes: 43

Views: 141051

Answers (10)

realmag777
realmag777

Reputation: 2088

Years gone and such things is possible to create using pure javascript and css without jquery, here is an example: Selectron23

Example:

let data1 = {
    options: [
        {
            value: 'usd',
            title: 'USD',
            text: 'United States Dollar',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/united_states_of_america.gif'
        },
        {
            value: 'eur',
            title: 'EUR',
            text: 'European Euro',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/european_union.gif'
        },
        {
            value: 'uah',
            title: 'UAH',
            text: 'Украинская гривна',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/ukraine.gif'
        },
        {
            value: 'gbp',
            title: 'GBP',
            text: 'Great Britain pound',
            img: 'https://pluginus.net/wp-content/uploads/2021/03/united_kingdom.gif'
        }
    ],
    label: 'Select currency',
    selected: 'uah',
    width: '100%',
    imgpos: 'right',
    //name: 'my_value', //hidden input name
    fusion: false, //use if wrap  to fuse titles by keys with options description here
    max_open_height: 200, //max height (px) of opened drop-down when vertical scroll appears
};

var selector1 = new Selectron23(document.querySelector('#block-example'), data1);

Result: enter image description here

Upvotes: 0

Tolga
Tolga

Reputation: 157

This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown

But data resource is json.

Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

Script

<script>
        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");
    }
</script>

Upvotes: 2

aslam parvaiz
aslam parvaiz

Reputation: 87

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

github repo link here

Upvotes: -2

T.Todua
T.Todua

Reputation: 56557

PLAIN JAVASCRIPT:

DEMO: http://codepen.io/tazotodua/pen/orhdp

var shownnn = "yes";
var dropd = document.getElementById("image-dropdown");

function showww() {
  dropd.style.height = "auto";
  dropd.style.overflow = "y-scroll";
}

function hideee() {
    dropd.style.height = "30px";
    dropd.style.overflow = "hidden";
  }
  //dropd.addEventListener('mouseover', showOrHide, false);
  //dropd.addEventListener('click',showOrHide , false);


function myfuunc(imgParent) {
  hideee();
  var mainDIVV = document.getElementById("image-dropdown");
  imgParent.parentNode.removeChild(imgParent);
  mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}
#image-dropdown {
  display: inline-block;
  border: 1px solid;
}
#image-dropdown {
  height: 30px;
  overflow: hidden;
}
/*#image-dropdown:hover {} */

#image-dropdown .img_holder {
  cursor: pointer;
}
#image-dropdown img.flagimgs {
  height: 30px;
}
#image-dropdown span.iTEXT {
  position: relative;
  top: -8px;
}
<!-- not tested in mobiles -->


<div id="image-dropdown" onmouseleave="hideee();">
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/fiabee.png" /> <span class="iTEXT">Second</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
  </div>
</div>

Upvotes: 3

Devanshi Parikh
Devanshi Parikh

Reputation: 265

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.)

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select Image
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
        <li role="separator" class="divider"></li>
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
    </ul>
</div>

Upvotes: 0

Ashraf
Ashraf

Reputation: 2632

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;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();

Upvotes: 29

Oleg
Oleg

Reputation: 25008

You don't even need javascript to do this!

I hope this got you intrigued so here it goes. First, the html structure:

<div id="image-dropdown">
    <input type="radio" id="line1" name="line-style" value="1" checked="checked" />
    <label for="line1"></label>
    <input type="radio" id="line2" name="line-style" value="2" />
    <label for="line2"></label>
    ...
</div>

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(...);}

Upvotes: 52

elclanrs
elclanrs

Reputation: 94131

If you think about it the concept behind a dropdown select it's pretty simple. For what you're trying to accomplish, a simple <ul> will do.

<ul id="menu">
    <li>
        <a href="#"><img src="" alt=""/></a> <!-- Selected -->
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
        </ul>
    </li>
</ul>

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).
});

Upvotes: 3

Fresheyeball
Fresheyeball

Reputation: 30025

Use combobox and add the following css .ddTitleText{ display : none; }

No more text, just images.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171700

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

Upvotes: 4

Related Questions