CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-select
Amanda Harvey
Amanda Harvey

Reputation: 549

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>

Image of basic idea

Upvotes: 0

Views: 5526

Answers (1)

ElasticCode
ElasticCode

Reputation: 7867

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

enter image description here

Upvotes: 2

Related Questions