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

Posted 2023-02-22

技术标签:

【中文标题】我可以设置 <select> 元素的样式以显示列吗？【英文标题】：Can I style a <select> element to show columns? 【发布时间】：2012-02-23 08:18:37 【问题描述】：

我正在尝试在具有 multiple=multiple 的

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

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

【问题讨论】：

使用原生 html select 元素是不可能的。但是，可以使用div 重新创建您的示例，该div 在单击控制输入时显示/隐藏。如果这对您很重要，您可能会遇到使用此方法的可访问性问题。 @RoryMcCrossan 您应该将此作为答案；仅仅因为答案是“否”并不意味着它无效。 :) 你可以用 jQuery 做任何事情，构建看起来像原生小部件的自定义表单元素。我个人建议不要这样做，因为最终用户体验的变化和功能的丧失通常不值得坚持您的自定义 UI 需求。 【参考方案1】：

绝对有可能。

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

this very popular question 更进一步，添加了自动完成功能。

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

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

【讨论】：

如果您仔细观察，“类似问题”会有所不同。 OP 喜欢有三列选项，而不是同一选项中的三列。 @PiTheNumber，这就是为什么我说它是相似的，我没有说它是一个骗局。虽然问题并不相同，但这里给出的一些答案会很有帮助。而且，在这种情况下，通过投票查看最受欢迎的答案也可能会有所帮助。这就是我在回答中提供此信息的原因。【参考方案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 代码。

【讨论】：

您所要做的就是单击并拖动任何/所有列，然后您可以在每列中选择一个选项。 i.imgur.com/gAB8v.jpg 这就是为什么它是一个简单示例的原因；）还有 13 种其他方法可以操作此选择。无论如何，您都必须验证应用中的数据。【参考方案3】：

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

它使在多列/多行中呈现 Select 和 MultiSelect 元素变得非常容易，并让您完全控制布局和设计。比尝试在 CSS 中执行此操作要容易得多；-)

【讨论】：

【参考方案4】：

不，您不能只使用 CSS 来设置选择下拉菜单的样式（Google Chrome 有一些例外），因为它们是操作系统的一部分，而不是浏览器的一部分。

但是，您可以使用 JavaScript（那里有一些非常好的 jQuery 插件，例如：uniformjs），您可以在其中隐藏原始选择下拉菜单，并将其替换为

-list 或其他您选择的元素 - 您可以设置样式。

【讨论】：