如何制作具有多列选项的选择列表 [英] 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.

我想创建一个包含多列具有不同选项的选择框，因为具有50个以上图标的垂直列表将是荒谬的，而且根本无法使用.我已经找到了很多有关如何将单个选项分为几列的信息，但是没有任何信息表明您可以对表进行表格排列.这样的事情有可能吗?在我如何设想这一点以帮助澄清这一点的底部，我提供了一个非常快速的模型.

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.

这是我一直在使用的基本HTML(不涉及图标):

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>

推荐答案

此jQuery插件将通过一些配置帮助您实现几乎所需的功能，但它需要做更多的工作来进行设计抛出styler选项，您可以实现您的需求.
http://wenzhixin.net.cn/p/multiple -select/docs/#the-multiple-items
http://wenzhixin.net.cn/p/multiple-select /docs/#the-styler

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

这篇关于如何制作具有多列选项的选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！