How to make a select list with multiple columns of options

Question

I am building a system that allows people to choose their own icons to go along with certain values. There are going to be many, many icons to choose from.

I would like to make a select box that has multiple columns with different options, because having a vertical list of 50+ icons would be absurd and not at all usable. I've found a lot of information on how to separate a single option into columns, but nothing that suggests that you could make a table-like arrangement of options. Is such a thing even possible? I've included a very quick mockup at the bottom of how I envision this looking to help clarify.

Here's the basic HTML I've been playing with (no icons involved):

<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>

No, you cannot do this with a ` – Sebastian Simon Mar 24 '18 at 18:37 — Sebastian Simon, Mar 24 '18 at 18:37
Search for a jQuery plugin that can transform ordinary ` – Salman A Mar 24 '18 at 18:53 — Salman A, Mar 24 '18 at 18:53

ElasticCode · Accepted Answer · 2018-03-24T20:02:14.330

This jQuery plugin will help you achieve almost what you need with some configuration, but it will need to do some more work for design throw styler option you can achieve what you need.
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%;';
         }
    });
});

How to make a select list with multiple columns of options

1 Answers1

Linked