如何制作具有多列选项的选择列表

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%;';
         }
    });
});