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

Question

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

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

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