Wie bricht man eine Zeile im Dropdown-Menü select2?

Question

Ich benutze eine Auswahl 2 Drop-down und dann einige lange Sätze in seinem Inhalt. Ich möchte dem Satz Zeilenumbrüche an der richtigen Stelle hinzufügen, aber das Dropdown-Menü wird automatisch angepasst.

Zum Beispiel wird der Inhalt des Dropdown sieht jetzt wie folgt aus:

Die Zeile wie dieses Recht sieht nun

2 Raten von $ 100 wählen. (. Sonder

Angebot)

I Need kontrollierte Zeilenumbrüche hinzufügen, so dass es wie folgt aussieht:

wählen 2 Raten von $ 100.

(Sonderangebot.)

ich nicht wan't die Breite der Drop-Down zu erhöhen oder die Schriftgröße ändern.

Mein Code ist hier bei 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> 

Answer 1

Für select2 Version 3.5 oder darunter, löste ich es mit den Eigenschaften "formatResult" & "formatSel ection ".

Wenn Sie v4.0 oder höher verwenden, verwenden Sie stattdessen "templateResult" und "templateSelection". Und in der Callback-Funktion verwenden Sie ein jquery-Tag, so dass das HTML-Tag für die Bruchzeile nicht bereinigt wird.

Gelöst jsfiddle here zeigt es für select2 v3.5 und darunter.

ich erklärte die select2 Dropdown in Javascript wie folgt aus:

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

und in der Callback-Funktion - formatDesign(), I gespalten alle Fäden und br-Tag in es so

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

hinzufügen

(Hinweis: für v4.0 und höher verwenden Sie eine jquery Zeichenfolge, um Br der Zeichenfolge hinzuzufügen. Es würde in etwa so aussehen :)

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

Answer 2

Sie es nicht mit geraden HTML und CSS tun. Sie müssen ein benutzerdefiniertes Dropdown mit JavaScript erstellen.

Answer 3

Ich denke, Sie müssen verschiedene Option Plug-in versuchen, das gleiche wie pro Ihre Anforderung zu versuchen. Ich kenne ein Plugin, das etwas wie dich tun kann. Hier ist die Quelle dieses Plugin

Hier ist der Demo-Geige Link:

http://jsfiddle.net/GXtpC/2099

Sie Quellcode dieses Menü finden hier: 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>

Hoffe, das wird Ihnen helfen.

Answer 4

Wenn Sie den Wert Ihrer Auswahl Dropdown kennen, können Sie auf der rechten Seite Polsterung hinzufügen, so dass es brechen kann. Hier ist eine Demo wie pro Ihre Anforderung

$("#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>

Answer 5

ich in css versucht itz überprüfen arbeitete diese

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

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

Hoffnung Seine nützlich für Sie ...Dank

Answer 6

Ich habe eine rohe Lösung bekam Anwender, die noch die select2 Plugin, white-space:pre; mit dem select2 li Elemente als solche stylen:

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

Hier ist die aktualisierte fiddle

Wenn dies funktioniert für dich kann ich dir helfen, es weiter zu verfeinern.

Answer 7

Die folgende CSS hilft Ihnen mit minimalen Auswirkungen.

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

aber Ihre HTML aussehen wird:

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

http://jsfiddle.net/mehd31hn/

(sah meine Antwort auf Sworrub Wettham fast ähnlich ist, aber vorschlagen pre-line über Pre verwenden, da dies nicht der Fall ist den möglichen Abstand zwischen der neuen Zeile beeinflussen.)