选择2:标签:所选标签的不同文本

时间:2017-07-28 15:36:11

标签: jquery-select2

如果选择了一个元素,那么如何显示不同的文本。

enter image description here

背景:我在Option中显示的Text很长,所以我想在选中时显示更短的版本。

1 个答案:

答案 0 :(得分:1)

您可以使用Select2的templateSelection选项,并为选项标记

添加一些自定义属性

HTML:

<select id="long" class="js-example-basic-multiple" multiple="multiple">
        <option data-custom="" value="all">All </option>
        <option data-custom="Lorem ipsum" value="#FF0000">Lorem ipsum dolor sit amet consectetur adipiscing elit</option>
        <option data-custom="Sed do" value="#00FF00">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</option>
        <option data-custom="Ut enim" value="#0000FF">Ut enim ad minim veniam quis nostrud exercitation</option>
        <option data-custom="Duis aute" value="#FFFF00">Duis aute irure dolor in reprehenderit in voluptate velit esse</option>
    </select>

使用Javascript:

jQuery(function() {
            jQuery('#long').select2({
                templateSelection: function (selection) {
                    return jQuery(selection.element).data('custom');
                }
            });
        });

https://jsfiddle.net/rijokpaul/phz9e5cs/4/