Question

是否有可能在html中有一堆<select>下拉列表，只显示一个小的（例如10像素宽）图标，但是当你点击它时，下拉列表中有一个列表，其中包含描述性字符串旁边的图标。（让我们看看ASCII艺术是否适用于SO）：

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

可以在CSS中完成吗？或者在jQuery中？

Answer 1

HTML中的<select>标记无法做到这一点。你需要使用一个jQuery插件提供的自定义控件。无论哪种方式，整个事情必须是Javascript，可能根本不会使用<select>。如果您想要一组功能更全面的丰富控件，您还可以查看ExtJS。它有一个Menu类，你可以用它。

Answer 2

是的，你可以使用jquery来做到这一点。 Marghoob Suleman的jquery Javascript Combo Box插件看起来就像你想要的那样。

image dropdown

看起来您希望将此下拉列表与某些类似于BalusC's answer的代码组合在一起 - 这样只显示图像，除非下拉列表处于活动状态。

Answer 3

显示/隐藏部分可以在jQuery的帮助下完成。这是一个SSCCE，只是复制'n'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>

Answer 4

不幸的是，it doesn't work in MSIE，但您可以使用CSS：

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

如何只显示当前所选选项的图标？

4 个答案: