HTML5: datalist - option

Marilu · 23. Februar 2015

Ich möchte in einer datalist eine Option als 'selected' anzeigen lassen, erhalte aber immer ein leeres Input-Feld. Hier der Code:

HTML

<!DOCTYPE html>




<html lang="de">




<head>
<meta charset="iso-8859/1">
</head>




<body>




<label for="formFabrikat">Fahrzeug: </label>




<input id="formFabrikat" name="formFabrikat" type="text" list="formFab" style="width: 50%; background-color:'#b0c4de';">




<datalist id="formFab">
	<option value="AC">AC
	<option value selected="Alfa Romeo">Alfa Romeo
	<option value="Alvis">Alvis
	<option value="American Motors">American Motors
	<option value="Aston Martin">Aston Martin
	<option value="Audi">Audi
	<option value="Austin">Austin
</datalist>




</body>




</html>

Alles anzeigen

Hat wer eine Idee, wie es funktionieren kann? Thx, Marilu

Nitamud · 23. Februar 2015

Bei dem wo du es willst so:

HTML

<option value="x" selected="selected">

wolf · 23. Februar 2015

Hi,
@nitamund .. das hier ist unnötig und verursacht nur mehr Traffic und weniger Übersicht.:

Code

selected="selected"

.. einfach

HTML

<option value="x" selected>

und alles ist ready.

Nitamud · 23. Februar 2015

Zitat von wolf

Hi,
@nitamund .. das hier ist unnötig und verursacht nur mehr Traffic und weniger Übersicht.:

Jap, ich habs nur der Vollständigkeit halber so geschrieben, da es sonst nicht XHTML konform ist:
"In XHTML, attribute minimization is forbidden."

wolf · 23. Februar 2015

Jap..
Nur so nebenbei.. oben steht ein doctype bei ihm xD

Nitamud · 23. Februar 2015

Naja, nun stehts wenigstens der Vollständigkeit halber da

Marilu · 24. Februar 2015

Zitat

<option value="x" selected>

Ich habe alle m öglichen Kombinationen mit selected ausprobiert ... ohne Erfolg.

Zitat

<!DOCTYPE html>

Was ist gegen doctype einzuwenden?

Auf jeden Fall klappt das selected nicht. Das ist die conditio sine qua non für datalist.

wolf · 24. Februar 2015

Ach im übrigen.. wer seine Tag's schließt.. ist klar im Vorteil.
der Option tag sieht so aus:

HTML

<option value="x">Value X</option>

Marilu · 24. Februar 2015

Der schließende Tag </option> ist optional. Aber ich habe es auch mit dem Tag versucht.

wolf · 24. Februar 2015

Er ist nicht optional wenn du danach ein Wort schreibst.. (dann wird dein Code invalide), außerdem gehört das zum schlechten Stil .. solang du es so angehst..:

HTML

<option label="the ABCD" value="abcd">
<option label="the EFGH" value="efgh">
<option label="the IJKL" value="ijkl">

stimmt deine aussage und es ist Valider ordentlicher Code.

HTML

<option value="abcd">the ABCD
<option value="efgh">the EFGH
<option value="ijkl">the IJKL

Dad da ist aber bullsh*t

Marilu · 24. Februar 2015

OK, da gebe ich Dir recht. Ich habe es jetzt so geändert:

HTML

<label for="Fabrikat">Fahrzeug: </label>
<input id="Fabrikat" name="Fabrikat" type="text" list="Fab">
<datalist id="Fab">
	<option label="AC" value="AC">
	<option label="Alfa Romeo" value="Alfa Romeo" selected>
	<option label="Alvis" value="Alvis">
	<option label="American Motors "value="American Motors">
	<option label="Aston Martin" value="Aston Martin">
	<option label="Audi" value="Audi">
	<option label="Austin" value="Austin">
</datalist>

Alles anzeigen

Geht aber auch nicht. Es wird kein Element vorselektiert.

wolf · 24. Februar 2015

Ich habe das grad mal ausprobiert un es kann gut sein das es kein selected für options in datalist's gibt.
Dann musst du dein Input feld halt Vorbelegen. Die Datalist ist ja nur eine Vorschlagsliste..
Wenn du Label und Value mit dem gleichen Inhalt füllst, kannst du dir das Label auch spaaren!
Genauso wie type="text" (denn Standart ist type="text") <- also weglassen.
Gewöhne dir an ID's und Klassen namen immer klein zu schreiben.. das führt später nur zu verwirrung.
Genauso solltest du die Namen der inputs klein schreiben für die weitere Verarbeitung, auch da führt es nur zu verwirrung.

hier mal optimiert:

HTML

<label for="fabrikat">Fahrzeug: </label>
<input value="Alfa Romeo" name="fabrikat" id="fabrikat" list="fabrikat-list">
<datalist id="fabrikat-list">
  <option value="AC">
  <option value="Alfa Romeo">
  <option value="Alvis">
  <option value="American Motors">
  <option value="Aston Martin">
  <option value="Audi">
  <option value="Austin">
</datalist>

Alles anzeigen

Marilu · 24. Februar 2015

>Dann musst du dein Input feld halt Vorbelegen

Danke, wolf. Der Tip ist der richtige. Ich hatte das in meiner Anwendung bei <input> versucht, hatte aber die value-Angabe vergessen. Jetzt scheint es zu laufen.

Laut W3C gibt es das selected-Attribut für <datalist><option>.

Zu den IDs und Klassen: Ich habe mir generell - wie auch bei Funktionen - die JS - CamelCase - Schreibweise angewöhnt. Ist für mich bei größeren Anwendungen übersichtlicher.
Es geht weiter mit <datalist>:

Ich versuche, die Liste mit JS zu generieren, z. B. neues Element einfügen:

JavaScript

len =top.content.document.getElementById( 'formTyp' ).options.length;
Typ = new Option( 'de Ville Convertible' );
top.content.document.getElementById( 'formTyp' ).options[len] = Typ;

Die erste Zeile ohne .options, wie bei <select> üblich, bringt eine Fehlermeldung. Irgendwie scheint <datalist> anders zu reagieren, wie <select>. Weiß jemand Rat?

wolf · 24. Februar 2015

Hier mal live.. http://codepen.io/wolf-w/pen/VYxBmP
Meine Konsole spuckt sowas wie 'acces denied für content' aus.. (weis nichtmehr genau )

Code

Error: Permission denied to access property 'content'
datalist = top.content.document.getElementById( 'fabrikat-list' );
Line 5 (22)

Marilu · 24. Februar 2015

Danke für Dein Engagement. Ich habe mich jetzt aber entschlossen, den Fallback auf <select> zu machen und für neue Einträge ein Image als Button zu setzen. Ich denke, damit kommen unbedarfte User eher klar.

HTML5: datalist - option

Jetzt mitmachen!

Teilen