How to make a select list with multiple columns of options

问题

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>

回答1:

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

来源：https://stackoverflow.com/questions/49468298/how-to-make-a-select-list-with-multiple-columns-of-options

标签

javascript

jquery

html5

css3

html-select