在 Select2 多选数据旁边添加额外的文本

Question

我选择Select2 multi。我选择的产品有价格，我希望人们看到它。但我想把这个 (data-price = "5.00") 从这里拿走。我该如何添加？

这正是我想要做的；

出现在我面前的形状；

奥泽利克 1 (5)
奥泽利克 1 (1)


<select multiple="" data-placeholder="Ekstra Malzeme Seçin.." class="ekstra form-control" name="coklu[]" data-select2-id="1" tabindex="-1" aria-hidden="true">
        <option value="Özellik 1" data-price="5" data-select2-id="12">Özellik 1 </option>
        <option value="Özellik 2" data-price="1" data-select2-id="13">Özellik 2 </option>
</select>


$('.ekstra').select2();

Answer 1

使用选项 templateSelection 传递自定义渲染器。给定的参数 state 包含文本 (state.text) 和指定的数据属性 (state.element.dataset ('price'))

$('.ekstra').select2({
    templateSelection: function (state) {
        return $(
            '<span>' + state.text + ' ' + state.element.dataset['price'] + ' TL</span>'
        );
    }
});

有关更多选项，请参阅 https://select2.org/configuration/options-api

在 Select2 多选数据旁边添加额外的文本

Add extra text next to Select2 multi selected data

javascript

jquery

jquery-select2