Replace a select dropdown with images

Question

I'm looking to replace a select dropdown with images.

My current code for the drop down is

<div class="app_services_dropdown_select">
  <select name="app_select_services" class="app_select_services">
  <option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
  <option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
  <input type="button" class="app_services_button" value="Show available times">
</div>

Which is generated by this code:

$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
    if ( $services ) {
        foreach ( $services as $service ) {
            $service_description = '';
            // Check if this is the first service, so it would be displayed by default
            if ( $service->ID == $appointments->service ) {
                $d = '';
                $sel = ' selected="selected"';
            }
            else {
                $d = ' style="display:none"';
                $sel = '';
            }
            // Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
        }
    }
    $s .= '</select>';
    $s .= '<input type="button" class="app_services_button" value="'.$show.'">';
    $s .= '</div>';
    $s .= '</div>';

And I really want an image of a car as value 1 and a van as value 2, plus I really want it to submit on click rather than having the button.

Is it possible to replace the dropdown with images instead or would I need to use a radio button, then style it using an image?

You can see my current dropdown in use here

Click handler on an image that makes ajax call is not complex. What is your specific question and what have you tried? This site isn't a UX concepts sounding board, it is for real code related issues. Question is really too broad. — charlietfl, Apr 24 '15 at 20:19
@charlietfl - My specific question was really asking if it was possible to replace my drop down with images or if I would need to use a radio button etc... I wasnt asking which one people thought was the best way. Sorry if I wasn't specific in my question. I'll reword it if I can — Totally Tech IT, Apr 24 '15 at 20:33
As far as radios go, would only really need those if this was part of a bigger form. Can easily use them inside a label that wraps image and covers the radio. `` with inner radio (or `for`) automatically transfers events to the radio. Otherwise is simple to send ajax in a click handler bound to any type of element — charlietfl, Apr 24 '15 at 20:45
I've just seen [this](http://stackoverflow.com/questions/9508029/dropdown-select-with-images) but it looks like they are just adding images in to a drop down. Have I missed something? — Totally Tech IT, Apr 26 '15 at 17:36
to be honest i'm not even 100% clear exactly what UI you are wanting. A demo showing before/after would help. Use jsfiddle.net or other code sharing site — charlietfl, Apr 26 '15 at 17:40
I've found this and edited it to show basically what I'm trying to do but I'm struggling to know where to add the code to my original code :) http://jsfiddle.net/TnFma/14/ — Totally Tech IT, Apr 26 '15 at 17:51
just hide them. I added a change handler on the radios to show the events are passing to them http://jsfiddle.net/TnFma/15/ — charlietfl, Apr 26 '15 at 17:52
@charlietfl - Thanks for that, I managed to hide them using a different way :) thank you... Any ideas how to add this code in to my code? — Totally Tech IT, Apr 26 '15 at 17:54
why not just change the php to do the images/radios instead? — charlietfl, Apr 26 '15 at 17:56
I'm not really sure how to add it in the php as above... There may end up being more options, say a motorbike too (One day) so if I can build it in to the php then it will continue to work (I'll need to manually add the img src etc.. — Totally Tech IT, Apr 26 '15 at 18:06
yeah (I'm still learning php really.) I don't know how to generate the info out of the database. [here](http://goo.gl/yxqZ9L) is the code that makes the current drop down, but I cannot work out where I need to put the code from JSFiddle — Totally Tech IT, Apr 26 '15 at 18:13

score 0 · Answer 1 · answered Apr 24 '15 at 20:37

0

There are various plugins are available which help you to achieve your target. I have googled and found few you can try them

answered Apr 24 '15 at 20:37

Manish Shukla

1,355
2
8
21

Hi, Thanks for these, I've checked and these seem to just add images to a drop down, rather than replacing the dropdown. – Totally Tech IT Apr 24 '15 at 20:40

score -1 · Answer 2 · answered Apr 24 '15 at 20:22

-1

Have a link that trigger the apparition of a div with Javascript.

This div will contains the two links images, with the links you want the user to go.

This div also need to be placed relatively with the initial link that trigger it.

If you don't want to program the Dropdown by yourself, you can use libraries like bootstrap or jquery-ui

answered Apr 24 '15 at 20:22

Dean

1,512
13
28

Really don't see how this answers OP question. It isn't very clear at all what you are even suggesting – charlietfl Apr 24 '15 at 20:49

Replace a select dropdown with images

2 Answers2