Wie anders ausgewählten Wert als Optionen Etikett zeigen

Question

Ich habe einfache HTML wählen:

<select id="mySelect" style="width:10em"> 
    <option value="val1">Some long text for val 1</option> 
    <option value="val2">Some long text for val 2</option> 
    <option value="val3">Some long text for val 3</option> 
</select> 

geöffnet Kombinationsfeld:

Ich sehe nicht, was ich ausgewählt haben, I don‘ Ich möchte die Breite einstellen, ich möchte einen anderen Text zeigen.

Ich will diese langen Texte in schwebender Platte halten, aber wenn die Option ausgewählt ist, mag ich einige kurze Version sehen Option in kleinen space.Is sehen, dass es eine Lösung verschiedene Texte in geschlossen zu zeigen, als im geöffneten Modus?

Answer 1

Ich löste dieses Problem mit jQuery durch Hinzufügen von ausgeblendeten Option, die ausgewählten Wert und Text entkoppelt. Überschreiben Sie einfach, dass diese ausgeblendete Option immer ausgewählt wird und den Wert auf den von Ihnen gewünschten Wert aktualisiert. In diesem Fall habe ich Wert als Text, aber es kann in einigen Brauch ein

var val = $("#mySelect").val(); 
 
var lbl = $("#mySelect option:selected").text(); 
 
$("#mySelect").prepend("<option value='" + val + "' data-value='selected' selected hidden>" + val + "</option>"); 
 

 
$("#mySelect").on('change', function() { 
 
\t var val = $("#mySelect").val(); 
 
    var lbl = $("#mySelect option:selected").text(); 
 
    
 
    $("#mySelect option[data-value='selected']").attr('value', val); 
 
    $("#mySelect option[data-value='selected']").text(val); 
 
    
 
    $("#mySelect").val(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2> 
 
jQuery hidden option 
 
</h2> 
 
<select id="mySelect" style="width:10em"> 
 
    <option value="val1">Some long text for val 1</option> 
 
    <option value="val2">Some long text for val 2</option> 
 
    <option value="val3">Some long text for val 3</option> 
 
</select>

Andere Ansatz ist bootstrap-select verwenden wie in Beispiel gespeichert werden:

<select class="selectpicker"> 
    <option title="Combo 1">Hot Dog, Fries and a Soda</option> 
    <option title="Combo 2">Burger, Shake and a Smile</option> 
    <option title="Combo 3">Sugar, Spice and all things nice</option> 
</select>