如何制作包含多列选项的 select 列表

Question

我正在构建一个系统，允许人们选择自己的图标以符合某些价值观。将会有很多很多图标可供选择。

我想制作一个 select 框，其中包含具有不同选项的多列，因为拥有 50 多个图标的垂直列表是荒谬的，而且根本无法使用。我找到了很多关于如何将单个选项分成几列的信息，但没有任何信息表明您可以对选项进行类似于 table 的排列。这样的事情甚至可能吗？我在底部包含了一个非常快速的模型，以帮助阐明我的设想。

这是我一直在玩的基本 HTML（不涉及图标）：

<select class="custom-select" size="10" name="selectIcon">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Answer 1

此 jQuery 插件将通过一些配置帮助您实现几乎所需的功能，但它需要为设计抛出 styler 选项做更多的工作才能实现您需要的功能。
http://wenzhixin.net.cn/p/multiple-select/docs/#the-multiple-items
http://wenzhixin.net.cn/p/multiple-select/docs/#the-styler

$(function() {
    $('#ms').change(function() {
        console.log($(this).val());
    }).multipleSelect({
        placeholder: "Select Icon",
        width: '50%',
        single: true,
        multiple: true,
        multipleWidth: 40,
         styler: function(value) {
            return 'background: url(icons/' + value + '.png) no-repeat 100% 100%;';
         }
    });
});

如何制作包含多列选项的 select 列表

How to make a select list with multiple columns of options

html

javascript

css

jquery

html-select