All geek questions in one place

How can I show only the icon of the currently selected parameter?

Is it possible that in html there will be a drop-down menu <select>that displays only a small (for example, 10 pixels) icon, but when you click on it, the drop-down list has a list with icons next to the descriptive line. (Let's see if the ASCII product works on SO):

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

Can this be done in CSS? Or in jQuery?

+3
source share
4 answers

<select> HTML. , , jQuery. , Javascript , , <select>. ExtJS, . Menu , .

+3

, jquery. Marghoob Sulemans Javascript Combo Box jquery , .

image dropdown

, , BalusC - , , .

+3

The show / hide part can be done with a little help from jQuery . Here is SSCCE , just copy ' paste'n'run .

<!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>
+1
source

Unfortunately, it does not work in MSIE , but you can do it with CSS:

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

Source: https://habr.com/ru/post/1735967/

More articles:


All Articles