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

Question

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

我想创建一个具有多个具有不同选项的列的选择框，因为具有50个以上图标的垂直列表将是荒谬的并且根本不可用。我发现了很多关于如何将单个选项分成列的信息，但没有任何迹象表明你可以制作类似于表格的选项。这样的事情甚至可能吗？我已经包含了一个非常快速的模型，底部是我如何设想这有助于澄清。

这是我一直在玩的基本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%;';
         }
    });
});