HTML Gezeigter Text in SELECT Dropdown

[Umlüx]

Gibt es irgendeinen Weg im Dropdown Feld eines SELECT mehr Text anzuzeigen als im Feld selbst?

in etwa so:

--------------
| option 1 V |
------------------------------------------
| option 1 - dies ist die erste Option |
| option 2 - dies ist die zweite Option |

Danke!

 

[cnubby]

Ja.
https://www.edv-lehrgang.de/auswahlmenue-dropdownliste-in-html/

 

[Umlüx]

okay.. ich bin wohl zu doof..
worauf genau beziehst du dich?

 

[cnubby]

Auf deine Frage, ob es irgendeinen Weg gibt, im Dropdown Feld eines SELECT mehr Text anzuzeigen als im Feld selbst.

Das habe ich jedenfalls dem ausschweifend dargestellten Hintergrundinformationen entnommen.

 

[Umlüx]

Im verlinkten Artikel gibt es dazu halt keine Lösung.
Wär ein Bild hilfreicher als die Ascii Skizze?

 

[cnubby]

Es würde helfen wenn du beschreibst, was, wie und wo gemacht werden soll.

 

[Umlüx]

Ich habe in meinem Formular designbedingt nur sehr wenig Platz für das SELECT, daber habe ich Abkürzungen für die OPTIONS hergenommen. Diese sind aber wenig selbsterklärend, daher wäre es perfekt, wenn ich im Dropdown bei den OPTIONS mehr/anderen Text anzeigen könnte. Nach der Selektion des gewünschten Wertes soll im SELECT aber wieder die Abkürzung stehen.

 

[User007]

Hi...

Ich würd's wohl mittels der kombinierten Attribute <option> und <value>, wie hier bei selfHTML gezeigt, versuchen umzusetzen.​

 

[Umlüx]

Value ist der Rückgabewert des Formulars. So funktioniert das leider nicht.

 

[sandreas]

Das was du vorhast, geht meines Wissens nach mit HTML und CSS alleine nicht (jedenfalls nicht standardkonform). Dafür brauchst du JavaScript. Du könntest mal sowas versuchen (ungetested, nur fürs prinzip). Damit weißt du beim Öffnen der Option einfach einen neuen Text zu und beim Schließen wieder den alten.

Da Optionsfelder aber meistens nicht sehr spaßig sind, würde ich gleich sowas wie selectize oder tom select verwenen, die sind deutlich flexibler (ich weiß nicht ob die noch aktuell und empfehlenswert ist ...)

<select id="myselect">
   <option value="1" data-closed="option 1" data-opened="option 1 - dies ist die erste Option">option 1</option>
</select>

<script>
const select = document.getElementById("myselect")

select.addEventListener('focusin', e => {
  e.querySelectorAll('option').forEach(o => o.innerText = o.dataset.opened);
})

document.addEventListener('focusout', e => {
    e.querySelectorAll('option').forEach(o => o.innerText = o.dataset.closed);
})

document.addEventListener('change', e => {
    e.querySelectorAll('option').forEach(o => o.innerText = o.dataset.closed);
})
</script>

 

[Umlüx]

Danke, das teste ich.

 

[[ChAoZ]]

Keine Ahnung ob es auch im Select funktioniert.
https://developer.mozilla.org/en-US.../abbr?retiredLocale=de#providing_an_expansion

@Umlüx