如何在select2下拉列表中换行？

Posted 2023-05-07

【中文标题】如何在select2下拉列表中换行？

【英文标题】：How to break a line in select2 dropdown?

【发布时间】：2016-03-12 20:09:33

【问题描述】：

我正在使用 select 2 下拉菜单，然后在其内容中显示一些长句子。我想在正确的地方为句子添加换行符，但下拉菜单是自动调整的。

例如，现在下拉列表的内容如下所示：

这条线现在看起来像这样

选择 2 期 100 美元。 （特别的

提供。）

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

选择 2 期 100 美元。

（特价。）

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

我的代码在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>

【问题讨论】：

嗨，我已经添加了适合你的答案。

我从未使用过这个“select 2”插件。但是你能设置 CSS option white-space: no-wrap 来强制它们单行吗？然后手动输入<br/>。

宁可使用css：white-space: pre-line;（见答案底部）

【参考方案1】：

对于 select2 3.5 或更低版本，我使用属性“formatResult”和“formatSelection”解决了它。

如果您使用的是 v4.0 或更高版本，请改用“templateResult”和“templateSelection”。并且在回调函数中使用jquery标签，这样断行的html标签就不会被清理。

已解决 jsfiddle here 显示它适用于 select2 v3.5 及以下版本。

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

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

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

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

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

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

【讨论】：

这是正确答案。 v4 的文档在这里：select2.github.io/examples.html#templating

这是对您解决方案的补充：https://***.com/a/60021393/7009277

【参考方案2】：

以下 CSS 将帮助您将影响降至最低。

.select2-drop li 
  white-space: pre-line;

但你的 html 看起来像：

<option value="2">select 2 installments of $100.
(special offer.)</option>

http://jsfiddle.net/mehd31hn/

（看到我的回答与 Sworrub Wettham 几乎相似，但建议使用 pre-line 而不是 pre，因为这不会影响新行之间的可能空间。）

【讨论】：

这比我的略有改进，使源代码更干净。

【参考方案3】：

我认为您必须尝试不同的选择选项插件才能根据您的要求执行相同的操作。我知道一个插件可以做像你这样的事情。这是该插件的来源

这里是演示小提琴链接：

http://jsfiddle.net/GXtpC/2099

你可以在这里找到这个菜单的源代码： https://github.com/fnagel/jquery-ui/wiki/Selectmenu

$(function()            
  
    
    $('select#speedB').selectmenu(
        style:'popup', 
        width: 300,
        format: addressFormatting
    );
    
    
    
    
);        

//a custom format option callback
var addressFormatting = function(text)
    var newText = text;
    //array of find replaces
    var findreps = [
        find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>',
        find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>',
        find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2',
        find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>',
        find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'
    ];
    
    for(var i in findreps)
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    
    return newText;
        

/* demo styles */
body font-size: 62.5%; font-family:"Verdana",sans-serif; 
fieldset  border:0;   
label,select,.ui-select-menu  float: left; margin-right: 10px; 
select  width: 200px;     
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a  text-decoration: underline !important; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<form action="#">
    <br /><br /><br />
    
    
    <h2>Same with option text formatting</h2>
    <fieldset>
        <label for="speedB">Select an Address:</label>
        <select name="speedB" id="speedB">
            <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
        </select>
    </fieldset>
    
    
</form>

希望这会对你有所帮助。

【讨论】：

嗨@Bhavin，它是一个很好的替代品，但我特别希望为 select2 插件解决这个问题。不过，感谢您的努力和帮助。

【参考方案4】：

我有一个粗略的解决方案，仍然使用 select2 插件，使用 white-space:pre; 来设置 select2 li 元素的样式：

.select2-drop li 
  white-space: pre;

这是更新后的fiddle

如果这对你有用，我可以帮助你进一步完善它。

【讨论】：

如您所见，由于换行符，它使源 html 看起来有点混乱 - 这是此解决方案正常工作所必需的

嘿，这是一个很好的解决方案，但我坚持使用基于 javascript 的解决方案（由于设计原因）。但是您的解决方案是所有其他解决方案中最好的。所以赏金给你......谢谢

【参考方案5】：

如果您知道选择下拉列表的值，那么您可以在右侧添加填充，这样它就可以破坏它。这是根据您的要求进行的演示

$("#e1").select2();

.select2-results lipadding-right:80px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<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>

【参考方案6】：

我在 css 中试过了，检查一下

   .select2-results .select2-result-label

  width:200px;
  word-wrap: break-word;

.select2-search-choice

  width:200px;

http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/

希望它对你有用... 谢谢

【讨论】：

但是如果分期金额是 100,000 怎么办。它会中断，因为这些值可以是动态的。尽管如此，感谢您的建议并为您的努力投票......干杯

【参考方案7】：

你不能用直接的 HTML 和 CSS 来做到这一点。您需要使用 javascript 创建一个自定义下拉菜单。

【讨论】：

您是否有指向执行此操作的示例 javascript 代码的链接？

我尝试在 javascript 中设置下拉列表的值，并在我想要休息的地方添加了一个 标记。它没有用。有什么线索吗？

这看起来不像是一个解决方案。虽然这是一个很好的建议，并且作为评论看起来不错。