Wie kann ich Optionstext im Dropdown-Menü anzeigen, der sich vom ausgewählten Text unterscheidet?

Question

Mit einer einfachen select, ich möchte einen Text in der Dropdown-Liste und einen anderen Text in der Auswahl Steuerelement, nachdem die Option ausgewählt wurde. Es ist dem Attribut label der Option in seinem Konzept ziemlich ähnlich.

Ich bin mir nicht sicher, ob es überhaupt möglich ist. Hier ist ein nicht arbeit Beispiel:

<select> 
    <option select-text="-- EMPTY --"> </option> 
    <option select-text="YES!!!">Yes</option> 
    <option>No</option> 
</select> 

---

Update: Ich habe nicht erwähnt, dass ich diese Lösung in einer dynamisch erzeugten HTML integrieren muß (ng-Tabelle Filter), so jede Lösung, die ist nicht rein HTML wird sehr schwer zu bedienen sein. Ich überlege sogar, nach einem anderen Table Control als einfacherer Lösung zu suchen, was ziemlich einfach ist - Platzhaltertext im Select-Filter.

ich eine Frage präziser zu meinem Problem erstellt haben:
How can I put a placeholder text on ng-table select filter?

Answer 1

Hier ist eine relativ einfache Lösung, die auf dem Standard value Attribut setzt und ein benutzerdefiniertes data-* Attribut:

function showDisplayValue(e) { 
 
    var options = e.target.options, 
 
     option = e.target.selectedOptions[0], 
 
     i; 
 
    
 
    // reset options 
 
    for (i = 0; i < options.length; ++i) { 
 
    options[i].innerText = options[i].value; 
 
    } 
 
    
 
    // change the selected option's text to its `data-display` attribute value 
 
    option.innerText = option.getAttribute('data-display'); 
 
} 
 

 
document.getElementById('foo').addEventListener('change', showDisplayValue, false);

<select id="foo"> 
 
    <option data-display="*** BAR ***" value="Bar">Bar</option> 
 
    <option data-display="*** BAZ ***" value="Baz">Baz</option> 
 
    <option data-display="*** QUX ***" value="Qux">Qux</option> 
 
</select>

Answer 2

gefunden etwas Ähnliches, was Sie für Fragen hier: https://stackoverflow.com/a/19184179/6555780

Es muss grundsätzlich in Javascript organisiert werden, so dass die ausgewählte Option sofort auf dem Bildschirm zeigt, wurde der Code unten aus Davids Antwort genommen und kann hier angesehen werden: http://jsfiddle.net/aCb73/

<select name="ref_rubrique" id="ref_rubrique"> 
    <option value="-- EMPTY --" selected> </option> 
    <option value="YES!!!">Yes</option> 
</select> 
<div id="ref_output"></div> 
<script type="text/javascript"> 

    var selectElement = document.getElementById('ref_rubrique'); 
    var divElement = document.getElementById('ref_output'); 

    selectElement.onchange = function() { 
     var selectedValue =  selectElement.options[selectElement.selectedIndex].value; 
     if (selectedValue == '-- EMPTY --') { 
      divElement.innerHTML = '<p>No</p>'; 
     } else if (selectedValue == 'YES!!!') { 
      divElement.innerHTML = '<p>Yes</p>'; 
     } 
    }; 

</script> 

Diese zielt im Wesentlichen die ref_rubique select-Tag und zeigt den Code in das Javascript auf der Auswahl basiert (Standard als --EMPTY--)

Nach unseren Kommentaren unter dem folgenden Code möglicherweise mit ng-Tabelle helfen könnte:

self.initialSorting = [ 
    { label: "Id ASC", value: { id: "asc"} }, 
    { label: "Id DESC", value: { id: "desc"} }, 
    { label: "Name ASC", value: { name: "asc"} }, 
    { label: "Name DESC", value: { name: "desc"} } 
    ]; 

Answer 3

Ich verstehe, dass Sie den Text in Select-Text-Attribut drucken möchten. Ich habe dieses Beispiel gefunden, wenn Sie das suchen.

<select id="mySelect"> 
    <option select-text="-- EMPTY --"> </option> 
    <option select-text="YES!!!">Yes</option> 
    <option>No</option> 
</select> 

$("#mySelect").change(function(){  
    $("#mySelect option:selected").text($("#mySelect").val()); 
}); 

Hier habe ich etwas Ähnliches gefunden. HTML select shows value instead of text