Im folgenden Abschnitt habe ich zwei Methoden zur Auswahl eines Elements: Eingabe mit Datenliste und traditionelle Auswahl mit Optionen.
Das select-Element hält die Optionswerte verborgen, und wir können es immer noch mit this.value erhalten. Mit dem Datenlistenprogramm wird der Wert jedoch tatsächlich angezeigt und der Textinhalt der Option wird als sekundäres Label angezeigt.
Was ich möchte, ist, dass sich der Input + Dataist-Ansatz wie eine traditionelle Auswahl verhält, wobei "Foo" und "Bar" als Optionen angezeigt werden, die bei Auswahl die Werte "1" bzw. "2" haben / p>
Ich habe auch einen wiederholten Namen "Foo" mit dem Wert "3" hinzugefügt. Dies soll zeigen, dass jede Lösung nicht von eindeutigen Optionen abhängig sein muss.
Es gibt keinen einheimischen Weg. Für Texteingaben
Das
input-Element repräsentiert eine Ein-Zeilen-Klartextbearbeitung Steuerung für den Wert des Elements.
Es ist also nicht möglich, eine Texteingabe anzuzeigen, die einen anderen Text als den Wert enthält.
Sie könnten den% code% getter in value übernehmen, aber ich empfehle es nicht, und ich sehe keine Möglichkeit zu wissen, welche Option gewählt wurde, wenn die Werte nicht eindeutig sind.
Oder Sie können die Eingabe anstelle des Textes den Wert der Option anzeigen lassen, aber ersetzen Sie sie sofort:
Im zweiten Beispiel zeigt HTMLInputElement.prototype den Wert der Option an, da dieser Code vor dem Ersetzen des Werts durch den Textinhalt ausgeführt wird. Wenn Sie später möchten, dass oninput="console.log(this.value)" accessions den Optionswert zurückgibt, müssen Sie den% code% getter wie im ersten Beispiel hijacken.
Die korrekte Syntax von Datenlisten ist wie folgt. Es hat auch keinen Sinn, zwei Optionen mit demselben Namen zu haben. Ich habe JavaScript aus dem HTML genommen, wie es sein sollte. Das ID-Attribut der einzelnen Optionen kann durch ein anderes Attribut ersetzt werden.
Sie können data-value und jquery verwenden, um Ihren Wert zu verbergen.
z.B.:
Danke an @ guest271314
Tags und Links html html-select html5 html-datalist