Ich dachte, dass das Hinzufügen eines "value"
Attributsatzes für das folgende <select>
Element dazu führen würde, dass das <option>
enthaltende Attribut "value"
standardmäßig ausgewählt wird:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Dies funktionierte jedoch nicht wie erwartet. Wie kann ich festlegen, welches <option>
Element standardmäßig ausgewählt ist?
html
html-select
Jichao
quelle
quelle
Antworten:
Stellen Sie
selected="selected"
die Option ein, die Sie als Standard festlegen möchten.quelle
ng-model
der standardmäßig ausgewählte Wert überschrieben wird (auch als undefiniert, wenn Sie das gebundene Objekt nicht festgelegt haben). Ich habe eine Weile gebraucht, um herauszufinden, warum dieselected="selected"
Option nicht ausgewählt wurde.Wenn Sie einen Standardtext als eine Art Platzhalter / Hinweis haben möchten, der jedoch nicht als gültiger Wert angesehen wird (z. B. "Hier vervollständigen", "Wählen Sie Ihre Nation aus"), können Sie Folgendes tun:
quelle
hidden
, stattdessen das Attribut zu verwenden. Siehe die Antwort von @ chong-lip-phang unten: stackoverflow.com/a/39358987/1192426<option value="" selected disabled hidden>Choose here</option>
Vollständiges Beispiel:
quelle
selected="selected"
? Ich meine, was sparst du? Zeit? Größe? Es ist vernachlässigbar und wenn es den Code "konformer" macht, warum nicht ?Ich bin auf diese Frage gestoßen, aber die akzeptierte und hoch bewertete Antwort hat bei mir nicht funktioniert. Es stellt sich heraus, dass die Einstellung
selected
nicht funktioniert , wenn Sie React verwenden .Stattdessen müssen Sie einen Wert
<select>
direkt im Tag festlegen, wie unten gezeigt:Weitere Informationen dazu finden Sie hier auf der Seite Reagieren .
quelle
value
Attribut für das<select>
Tag verwenden, dh<select value="3">
es ist im W3C-Validator nicht gültig.$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
Sie können es so machen:
Geben Sie das Schlüsselwort "selected" in das Options-Tag ein, das standardmäßig in Ihrer Dropdown-Liste angezeigt werden soll.
Sie können dem Options-Tag auch ein Attribut bereitstellen, z
quelle
selected="false"
nicht zulässig ist undselected=""
auch ausgewählt wird. Die einzige Möglichkeit, nicht ausgewählte Optionen auszuwählen, besteht darin, das Attribut zu entfernen. w3.org/html/wg/drafts/html/master/…Wenn Sie die Werte aus einem Formular verwenden und dynamisch halten möchten, versuchen Sie dies mit PHP
quelle
Ich bevorzuge das:
'Hier auswählen' verschwindet, nachdem eine Option ausgewählt wurde.
quelle
value=""
, um sicherzustellen, dass Sie einen leeren Wert erhalten.Eine Verbesserung für Nobitas Antwort. Sie können auch die visuelle Ansicht der Dropdown-Liste verbessern, indem Sie das Element "Hier auswählen" ausblenden.
quelle
Bester Weg meiner Meinung nach:
Warum nicht deaktiviert?
Wenn Sie das Attribut disabled zusammen mit
<button type="reset">Reset</button>
value verwenden, wird es nicht auf den ursprünglichen Platzhalter zurückgesetzt. Stattdessen wählt der Browser zuerst die Option nicht deaktiviert, was zu Benutzerfehlern führen kann.Standard leerer Wert
Jedes Produktionsformular hat eine Validierung, dann sollte ein leerer Wert kein Problem sein. Auf diese Weise haben wir möglicherweise leere nicht benötigte Auswahl.
XHTML-Syntaxattribute
selected="selected"
Die Syntax ist die einzige Möglichkeit, sowohl mit XHTML als auch mit HTML 5 kompatibel zu sein. Es handelt sich um die korrekte XML-Syntax, und einige Editoren können sich darüber freuen. Es ist abwärtskompatibler. Ich habe kein starkes Gefühl dafür, aber wenn die oben genannten Argumente Ihre Anforderungen sind, sollten Sie die vollständige Syntax befolgen.quelle
Ein anderes Beispiel; Verwenden von JavaScript zum Festlegen einer ausgewählten Option.
(Mit diesem Beispiel können Sie ein Array von Werten in eine Dropdown-Komponente schleifen.)
<select id="yourDropDownElementId"><select/>
quelle
el.selected = "selected";
, um dem w3-standard zu entsprechen?selected
ist eine boolesche Eigenschaft gemäß w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Vorausgewählte Optionen ausgewählt [CI] - Wenn diese Option festgelegt ist, gibt dieses boolesche Attribut an, dass diese Option aktiviert ist Vorausgewählt.` Weitere Informationen zur Verwendung finden Sie unter w3c Schulen - w3schools.com/jsref/prop_option_selected.aspDas ausgewählte Attribut ist ein boolesches Attribut.
Wenn vorhanden, wird festgelegt, dass beim Laden der Seite eine Option ausgewählt werden soll.
Die vorgewählte Option wird zuerst in der Dropdown-Liste angezeigt.
quelle
Wenn Sie reagieren, können Sie
defaultValue
als Attribut anstelle desvalue
Auswahl-Tags verwenden.quelle
Wenn Sie select mit Winkel 1 verwenden, müssen Sie ng-init verwenden. Andernfalls wird die zweite Option nicht ausgewählt, da ng-model den standardmäßig ausgewählten Wert überschreibt
quelle
Ich habe diese PHP-Funktion verwendet, um die Optionen zu generieren und in meinen HTML-Code einzufügen
Und dann verwende ich es in meinem Webseitencode wie folgt;
Wenn $ endmin bei jedem Laden der Seite aus einer _POST-Variablen erstellt wird (und dieser Code sich in einem Formular befindet, das Beiträge veröffentlicht), wird standardmäßig der zuvor ausgewählte Wert ausgewählt.
quelle
Das Wertattribut des Tags fehlt, sodass es nicht wie gewünscht angezeigt wird. Standardmäßig wird die erste Option beim Laden der Dropdown-Seite angezeigt, wenn das Wertattribut für das Tag festgelegt ist. Ich habe mein Problem auf diese Weise gelöst
quelle
Dieser Code legt den Standardwert für das HTML-Auswahlelement mit PHP fest.
quelle
Sie können verwenden:
anstatt,
beide sind gleich richtig.
quelle
Ich würde einfach den ersten Auswahloptionswert zum Standardwert machen und diesen Wert einfach in der Dropdown-Liste mit der neuen "versteckten" Funktion von HTML5 ausblenden. So was:
quelle
Ich selbst benutze es
quelle
Sie müssen nur das Attribut "selected" für eine bestimmte Option festlegen, anstatt direkt ein Element auszuwählen.
Hier ist ein Ausschnitt für dasselbe und mehrere Arbeitsbeispiele mit unterschiedlichen Werten.
quelle
Set selected = "selected", wobei der Optionswert 3 ist
Bitte sehen Sie das folgende Beispiel
quelle
Das Problem dabei
<select>
ist, dass es manchmal nicht mit dem Status des aktuell gerenderten Objekts verbunden ist. Wenn sich in der Optionsliste nichts geändert hat, wird kein Änderungswert zurückgegeben. Dies kann ein Problem sein, wenn Sie versuchen, die erste Option aus einer Liste auszuwählen. Der folgende Code kann die erste Option beim erstmaligen Auswählen erhalten, würde dies jedochonchange="changeFontSize(this)"
selbst nicht tun. Es gibt oben beschriebene Methoden, die eine Dummy-Option verwenden, um einen Benutzer zu zwingen, einen Änderungswert vorzunehmen, um den tatsächlichen ersten Wert aufzunehmen, z. B. das Starten der Liste mit einem leeren Wert. Hinweis: onclick würde die Funktion zweimal aufrufen, der folgende Code nicht, löst jedoch das erstmalige Problem.quelle
Ich benutze Angular und setze die Standardoption von
HTML-Vorlage
Skript:
quelle
So habe ich es gemacht ...
quelle
Sie können es so versuchen
quelle
HTML-Snippet:
Natives JavaScript-Snippet:
quelle
quelle