Question

我需要使用包含图像和文本的选项生成自定义下拉列表。

在HTML选择选项中，只能放置文本。

所有现有的自定义下拉菜单（如bootsrap，jquery ui等）都会创建显示为select的DIV，但如果选项高度超过窗口高度，我们将看不到所有选项。

这意味着我希望看到它像选择框，其选项显示在窗口中。

换句话说，我正在寻找一个关于如何使div显示溢出窗口的解决方案。

For example:

如果DIV高度为400px且WINDOW为300px，则仍会显示整个DIV（当div的一部分不在窗口时）。

Answer 1

尝试使用ddSlick jquery插件。您可以设置下拉将溢出的高度。以下是它的代码示例：

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.min.js"></script>
</head>

<body>
    <div id="myDropdown"></div>
    <script>
        $(function() {
            //Dropdown plugin data
            var ddData = [{
                text: "Facebook",
                value: 1,
                selected: false,
                description: "Description with Facebook",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            }, {
                text: "Twitter",
                value: 2,
                selected: false,
                description: "Description with Twitter",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            }, {
                text: "LinkedIn",
                value: 3,
                selected: true,
                description: "Description with LinkedIn",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            }, {
                text: "Foursquare",
                value: 4,
                selected: false,
                description: "Description with Foursquare",
                imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            }];

            $('#myDropdown').ddslick({
                data: ddData,
                width: 300,
                height: 110,
                selectText: "Select your preferred social network",
                imagePosition: "left",
                onSelected: function(selectedData) {}
            });
        });
    </script>
</body>

</html>

您会注意到滚动条出现在设置了高度的下拉选项中。

你可以在jsbin上测试它here。

像html选择框一样在窗口外显示div

1 个答案: