如何在select2下拉菜单中换行？ [英] How to break a line in select2 dropdown?

问题描述

我正在使用选择2下拉菜单，然后在其内容中显示一些长句子。我想在句子的正确位置添加换行符，但下拉列表会自动调整。

I am using a select 2 dropdown and then showing some long sentences in its content. I want to add line breaks to the sentence at the right place but the drop down is auto adjusting.

例如，下拉列表的内容现在看起来像这样：
< a href = https://i.stack.imgur.com/1Lnnm.png rel = noreferrer>

For example the content of the dropdown right now looks like this :

该行现在看起来像这样

选择2期$ 100。 （特殊

select 2 installments of $100. (special

提供。）

我需要添加受控的换行符，使其看起来像这样：

I Need to add controlled line breaks so that it looks like this:

选择2笔分期付款$ 100。

select 2 installments of $100.

（特价）

我不想增加下拉菜单的宽度或更改字体大小。

I don't wan't to increase the width of dropdown or change the font size.

我的代码在 jsfiddle ：

<select multiple id="e1" style="width:300px">
    <option value="1">select 1 installment of $200</option>
    <option value="2">select 2 installments of $100. (special offer.)</option>
    <option value="3">select 3 installments of $89</option>
    <option value="4">select 4 installments of $50. (no interest in this option)</option>
    <option value="5">select 5 installments of $45</option>
</select>

推荐答案

对于select2版本3.5或更低版本，我用属性 formatResult&

For select2 version 3.5 or below, I solved it with the properties "formatResult" & "formatSelection".

如果您使用的是v4.0或更高版本，请使用 templateResult和 templateSelection。并在回调函数中使用jquery标记，以便使换行符的html标记不会被清除。

If you are using v4.0 or above use "templateResult" and "templateSelection" instead. And in the callback function use a jquery tag, so that the html tag for break line does not get sanitised.

解决了jsfiddle 在此在select2 v3.5及以下版本中显示。

Solved jsfiddle here shows it for select2 v3.5 and below.

我在javascript中这样声明了select2下拉列表：

I declared the select2 dropdown in javascript like this :

$('#color').select2({
placeholder: "Select something",
minimumResultsForSearch: Infinity, //removes the search box
formatResult: formatDesign,
formatSelection: formatDesign
});

并在回调函数-formatDesign（）中，我拆分所有字符串并在其中添加br标签像这样

and in the callback function - formatDesign() , I split all the strings and add br tag in it like this

function formatDesign(item) {
var selectionText = item.text.split(".");
var $returnString = selectionText[0] + "</br>" + selectionText[1];
return $returnString;
};

（注意：对于v4.0及更高版本，请使用jquery字符串，将br添加到字符串中。它看起来像这样：）

(note: for v4.0 and above use a jquery string, to add br to the string. It would look something like this :)

var $returnString = $('<span>'+selectionText[0] + '</br>' + selectionText[1] + '</span>');

这篇关于如何在select2下拉菜单中换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！