Как разбить строку в выпадающем меню select2?

Я использую раскрывающийся список 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>

Ответ 1

Для select2 версии 3.5 или ниже я решил его со свойствами "formatResult" и "formatSelection".

Если вы используете v4.0 или выше, вместо этого используйте "templateResult" и "templateSelection". И в функции обратного вызова используется тэг jquery, так что тег html для строки прерывания не подвергается санитарной обработке.

Решенный jsfiddle здесь показывает его для select2 v3.5 и ниже.

Я объявил выпадающее меню select2 в javascript следующим образом:

$('#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>');

Ответ 2

Я думаю, вам нужно попробовать другой плагин выбора, чтобы сделать то же, что и в соответствии с вашим требованием. Я знаю один плагин, который может сделать что-то вроде вас. Вот источник этого плагина

Вот ссылка на демонстрационную скрипту:

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>

Ответ 3

Следующий 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, так как это не влияет на возможное пространство между новой строкой.)

Ответ 4

Если вы знаете значение своего раскрывающегося списка, вы можете добавить отступ с правой стороны, чтобы он мог его разбить. Вот демонстрация согласно вашему требованию

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

.select2-results li{padding-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>

Ответ 5

Я попробовал в css itz work проверить это

   .select2-results .select2-result-label
{
  width:200px;
  word-wrap: break-word;
}
.select2-search-choice
{
  width:200px;
}

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

Надеюсь, это полезно для вас... Спасибо

Ответ 6

У меня есть грубое решение, которое все еще использует плагин select2, используя white-space:pre; для стилирования элементов select2 li как таковых:

.select2-drop li {
  white-space: pre;
}

Здесь обновлено fiddle

Если это сработает для вас, я могу помочь вам доработать его дальше.

Ответ 7

Вы не можете сделать это с помощью прямого HTML и CSS. Вам нужно будет создать настраиваемое раскрывающееся меню с javascript.