Как я могу показать только значок выбранной опции? - PullRequest
Новая
       30

Как я могу показать только значок выбранной опции?

3 голосов
/ 08 марта 2010

Возможно ли иметь в раскрывающемся списке <select> в html только маленький значок (скажем, 10 пикселей в ширину), но при щелчке по нему в раскрывающемся списке появляется значок со значками рядом с описательной строкой. (Давайте посмотрим, работает ли ASCII art на SO): 

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

Можно ли это сделать в CSS? Или в jQuery?

Ответы [ 4 ]

3 голосов
/ 08 марта 2010

Да, вы можете сделать это с помощью jquery. Плагин Marghoob Suleman Javascript Combo Box для jquery выглядит так, как вы хотите.

image dropdown

Похоже, что вам нужно сочетание этого раскрывающегося списка с кодом, похожим на ответ BalusC , так что отображается только изображение, если раскрывающийся список не активен.

3 голосов
/ 08 марта 2010

Это невозможно с тегом <select> в HTML. Вам нужно будет использовать пользовательский элемент управления, возможно, с плагином jQuery. В любом случае, все это должен быть Javascript и, вероятно, вообще не использовать <select>. Вы также можете взглянуть на ExtJS , если вам нужен набор более полнофункциональных многофункциональных элементов управления. У него есть Меню класс, который вы можете использовать для этого.

1 голос
/ 08 марта 2010

Показать / скрыть часть можно с небольшой помощью jQuery . Вот SSCCE , просто скопируйте и вставьте его. 

<!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>
0 голосов
/ 08 марта 2010

К сожалению, это не работает в MSIE , но вы можете сделать это с помощью CSS: 

select#dropdown option[value="disable"] {
    background-image:url(disable.png);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...