Question

我正在尝试在＆lt; select＆gt;中创建基于列的列表multiple = multiple的元素 - 我想在菜单中看到的是：

Opt1    Opt5    Opt9
Opt2    Opt6    Opt10
Opt3    Opt7    Opt11
Opt4    Opt8    Opt12

这可能吗？我当然愿意在jQuery中这样做，但更喜欢CSS。

Answer 1

绝对有可能。

this similar SO question中建议了几个选项。

并且this very popular question更进一步，添加了自动填充功能。

如果您使用谷歌“jquery multi-column dropdownlist”，您可以找到更多选择。

顺便说一句，“multiple”属性指定用户是否可以选择列表中的多个项目，而不是下拉列表中是否显示多个列。

Answer 2

我不认为这可以用CSS。

但是，你可以选择三个并使用javascript来确保只选择其中一个。

以下是如何使用jQuery执行此操作的简单示例：

$('.columnselect').click(function()
{
    var id = $(this).attr('id');
    $('.columnselect:not([id="' + id + '"]) option:selected').attr('selected', false);
})

请参阅http://jsfiddle.net/eJmgz/

如果您想要多选，请删除Javascript代码。

Answer 3

jQuery gentleSelect plugin完全符合您的要求:-) http://shawnchin.github.com/jquery-gentleSelect/

这使得在多个列/行中呈现Select和MultiSelect元素变得非常容易，并使您可以完全控制布局和设计。比在CSS中尝试这样做容易得多; - ）

Answer 4

不 - 您不能仅使用CSS设置选择下拉列表（Google Chrome有一些例外），因为它们是操作系统的一部分，而不是浏览器。

然而，你可以使用JavaScript（有一些非常好的jQuery插件，就像这一个：uniformjs），你基本上隐藏原始的选择下拉列表，并用＆lt; li＆gt;替换它 - 列表或您选择的其他元素 - 您可以设置样式。

我可以设置<select>元素的样式以显示列吗？</select>

4 个答案: