Dropdown Select With Images

Putting images with options in a dropdown list

This code will work only in Firefox:

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

---

Edit (April 2018):

Firefox does not support this anymore.

How to add images in select list?

In Firefox you can just add background image to option:

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

Better yet, you can separate HTML and CSS like that

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

Dropdown select with images

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

select and display an image from a dropdown menu

You must need to keep your file inside your project ...

change

$folder = 'C:\Users\source\\';

to

$folder = 'images\\';

images is the folder name which inside your project...

xampp or wampp not consider the local path files...

And it won't display the images as well...

Hope this Helpful...

I have changed two places in your code...

 <?php


    $folder = 'images\\'; // changed here

      echo '<form action="" method="post">'."\n".'<select name="image">'."\n".
     dropdown(image_filenames($folder), @$_POST['image']).
     '</select>'."\n".'<input type="submit" name="submit">'."\n".'
     </form>';
    function image_filenames($dir)
    {
      $handle = @opendir($dir)
        or die("I cannot open the directory '<b>$dir</b>' for reading.");
    $images = array();
    while (false !== ($file = readdir($handle)))
    {
        if (preg_match('/^.*\.(jpg|jpeg|png|gif|svg)$/', $file))
        {
            $images[] = $file;
        }
    }
    closedir($handle);
    return $images;
    }
    function dropdown($options_array, $selected = null)
    {
    $return = null;
    foreach($options_array as $option)
    {
        $return .= '<option value="'.$option.'"'.
                   (($option == $selected) ? ' selected="selected"' : null ).
                   '>'.$option.'</option>'."\n";
    }
    return $return;
    }


    if (isset($_POST['submit'])) {

    echo '<img src=images\\'. $_POST['image'] . ' />';  // changed here



    }
       ?>

want to show image/icons in dropdown list

html:

<select name="event_icon" id="event_icon">
                                   <option>Select An Icon</option>
                                   <option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
                                   <option  value="cake.png"  data-style="background-image: url('icons/cake.png');"></option>
                                   <option value="game.png" data-style="background-image: url('icons/game.png');"></option>
                               </select>

script:

<script>
  $(function () {
       $.widget("custom.iconselectmenu", $.ui.selectmenu, {
           _renderItem: function (ul, item) {
               var li = $("<li>"),
                       wrapper = $("<div>", {text: item.label});

               if (item.disabled) {
                   li.addClass("ui-state-disabled");
               }

               $("<span>", {
                   style: item.element.attr("data-style"),
                   "class": "ui-icon " + item.element.attr("data-class")
               })
                       .appendTo(wrapper);

               return li.append(wrapper).appendTo(ul);
           }
       });


       $("#event_icon")
               .iconselectmenu()
               .iconselectmenu("menuWidget")
               .addClass("ui-menu-icons avatar");
   });
</script>

Display Image Based on 2 Dropdown Values

The variable you stored the image filename is different from the variable you passed as the value in for the image's src tag

$('select.form-control').change(function() {
   var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
   $('#imgToChange').attr('src', filename);
});

You can also try using the .attr() method in place of the .prop() method like i did

Updated See code below
HTML

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>
<img id="imgElem" src="" alt="">

JS

var imageSrc;
var imgFolder = "/path/to/image/folder/"; // specify the path to the folder containing the imgs in this variable

$("select").change(function(){
    imageSrc = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    $("#imgElem").attr("src", imageSrc);
    $("p").text(imageSrc);
});

UPDATED ONCE AGAIN

This update creates the img tag each time an option is selected, replacing the previous img tag. This is to prevent the img src(undefined) error on page load.

To archive this, i added a div in the html to hold the img element, and simply change the divs html content.

HTML UPDATED

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>

<p></p> <!--  just for debugging -->
<div class="img-wrap"></div> <!-- a div to hold the image -->

JS UPDATED

// specify the path to the folder containing the imgs in this variable
var imgFolder = "/path/to/image/folder/"; 

$("select").change(function(){
    var src; // variable to hold the src
    
    src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    // append src to a p element just for debugging sake(i.e to see the change in the src)
    $("p").text(src);
    
    // create an img element with the src each time and append to the image wrap div
    $(".img-wrap").html(`<img src="${src}">`);
});

UPDATED ONCE AGAIN

To make it show the image with the default selected options both on page load and on option select, i tweaked the code again

NEW JS CODE

function getImageSrc(){
    // specify the path to the folder containing the imgs in this variable
    var imgFolder = "/path/to/image/folder/"; 

    // loop through each select element
    $("select").each(function(){
        // fire function to get src
        getSrc();
        
        // fire function to get src on change
        $(this).change(function(){
            getSrc();
        })
    });
    
    function getSrc(){
        var src; // variable to hold the src

        src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
        $("#imgElem").attr("src", src);
        // append src to a p element just for debugging sake(i.e to see the change in the src)
        $("p").text(src);

        // create a an img element with the src each time and append to the image wrap div
        $(".img-wrap").html(`<img src="${src}">`);
    }
}

// fire function on page-load
$(document).ready(function(){
    getImageSrc();
})

---

Related Topics