How can I show just the icon of the currently selected option?

Question

Is it possible to have a bunch of <select> dropdowns in html that only display a small (say 10 pixels wide) icon, but when you click it the drop down has a list with the icons beside a descriptive string. (Let's see if ASCII art works on SO):

[X]
| X - Disable |
| v/ - Enable |
| O - Ignore  |
+-------------+
[O]
[v]
[X]

Can that be done in CSS? Or in jQuery?

Dupe of http://stackoverflow.com/questions/1079112/images-in-dropdown-list — Tomas Vana, Mar 08 '10 at 17:41
heh, the duplicate even found the same plugin I did. What he said :) — Colin Pickard, Mar 08 '10 at 17:45
@Thomas, no it's not a dup because I don't want the text to show for the selected one. — Paul Tomblin, Mar 08 '10 at 17:45

score 3 · Answer 1 · answered Mar 08 '10 at 17:38

3

This is not possible with a <select> tag in HTML. You'd need to use a custom control provided perhaps with a jQuery plugin. Either way, the entire thing would have to be Javascript and probably wouldn't make use of <select> at all. You could also take a look at ExtJS if you wanted a set of more fully-featured rich controls. It has a Menu class you could use for this.

answered Mar 08 '10 at 17:38

Marc W

19,083
4
59
71

2

You would need to have an actual select in there too, for accessability and backwards compability. You can then replace it with javascript generated control. – Colin Pickard Mar 08 '10 at 17:54

score 3 · Answer 2 · edited May 23 '17 at 12:08

3

Yes you can do it using jquery. Marghoob Suleman’s Javascript Combo Box plugin for jquery looks like what you want.

image dropdown

It looks like you want a combination of this dropdown with some code similar to BalusC's answer - so that only the image is shown unless the dropdown is active.

edited May 23 '17 at 12:08

Community

1
1

answered Mar 08 '10 at 17:41

Colin Pickard

45,724
13
98
148

1

Very nice. I've never used this one before. – Marc W Mar 08 '10 at 17:42
No, I don't want to show the text of the selected one, only the icon. – Paul Tomblin Mar 08 '10 at 17:46
1

but you could add javascript to change the css of the selected option… attach to the `OnChange` event, put your option text in a span, change css of selected `span` to `display: none` bam. This will work. – ghoppe Mar 08 '10 at 17:50
Note: using invisible spans actually doesn't work in *real* option elements. – BalusC Mar 08 '10 at 18:04
I'd feel a lot happier about this plugin if the links on the guy's page actually worked. He's got a link to version 2.1 on his home page that's broken, and so are all the Javascript links from his "Components and Modules" page. – Paul Tomblin Mar 08 '10 at 18:13
The links are indeed dead. I could however get a copy by just checking the page source of the demo page and following the URL to the JS: http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/jquery-image-dropdown-2.1/msdropdown/js/jquery.dd.js – BalusC Mar 08 '10 at 18:26
@BalusC - I tried that, and I get an error that Firebug won't actually show me where it is. I'd much rather get a non-minified version, or have some indication that the developer is actually alive and cares about the plugin. – Paul Tomblin Mar 08 '10 at 19:59
The page is still in the google cache (http://209.85.229.132/search?q=cache:igyT0q7ov18J:www.marghoobsuleman.com/jquery-image-dropdown%3F%26utm_source%3Dreferrer%26utm_medium%3Dcpc%26utm_term%3Djunior%26utm_content%3Dsuleman%26utm_campaign%3Draghib+marghoobsuleman.com+dropdown&cd=1&hl=en&ct=clnk&gl=uk&client=firefox-a) so I guess it's a recent break – Colin Pickard Mar 09 '10 at 10:01

BalusC · Answer 3 · 2010-03-08T17:52:06.057

The show/hide part can be done with little help of jQuery. Here's an SSCCE, just copy'n'paste'n'run it.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2403303</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('select')
                    .bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
                    .bind('click', function() { $(this).toggleClass('clicked'); })
                    .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
                    .bind('change blur', function() { $(this).removeClass('expand clicked'); });
            });
        </script>
        <style>
            select { font-family: monospace; width: 35px; }
            select.expand { width: auto; }
        </style>
    </head>
    <body>
        <select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
        <select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
        <select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
    </body>
</html>

score 0 · Answer 4 · answered Mar 08 '10 at 17:46

0

Unfortunately, it doesn't work in MSIE, but you can do it with CSS:

select#dropdown option[value="disable"] {
    background-image:url(disable.png);
}

answered Mar 08 '10 at 17:46

ghoppe

21,452
3
30
21

How can I show just the icon of the currently selected option?

4 Answers4