it-swarm.com.de

Wie stelle ich eine nicht auswählbare Standardbeschreibung in einem Auswahlmenü (Dropdown-Menü) in HTML ein?

Ich habe eine Dropdown-Liste, in der der Benutzer eine Sprache auswählt:

<select>
    <option>English</option>
    <option>Spanish</option>
</select>
  1. Ich möchte, dass die standardmäßig angezeigte Standardoption "Select A language" anstelle von "English" anzeigt (meine erste Option wird mit Default angezeigt).
  2. Ich möchte nicht, dass der Benutzer "Sprache auswählen" auswählen kann.
33
RSM

Wenn keine der Optionen im select ein selected-Attribut hat, ist die erste Option die ausgewählte.

Um eine Standardoption auszuwählen, die nicht die erste ist, fügen Sie dieser Option ein selected-Attribut hinzu:

<option selected="selected">Select a language</option>

Sie können die HTML 4.01-Spezifikation bezüglich der Standardwerte in select-Element lesen.

Ich empfehle Ihnen, ein gutes HTML-Buch zu lesen, wenn Sie HTML-Grundlagen wie dieses erlernen möchten - ich empfehle Head First HTML .

45
Oded

Aufbauend auf der Antwort von Oded können Sie auch die Standardoption festlegen, jedoch nicht als auswählbare Option, wenn es sich nur um Dummy-Text handelt. Zum Beispiel könnten Sie folgendes tun:

<option selected="selected" disabled="disabled">Select a language</option>

Dies würde "Wählen Sie eine Sprache" anzeigen, bevor der Benutzer auf das Auswahlfeld klickt, der Benutzer kann es jedoch aufgrund des deaktivierten Attributs nicht auswählen.

55
Glen Selle

.selectmenu{
  
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: #0088cc ;
	width: 200px; /*Width of select dropdown to give space for arrow image*/
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
	color: #FFF;
	border-radius: 2px;
	padding: 5px;
    border:0 !important;
	box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }
Try this html

<select class="selectmenu">
<option selected disabled class="hideoption">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>

5
Ashok

Machen Sie einfach die Option # 1. Wählen Sie die Sprache aus:

Live Demo

3
Myles Gray

Diese Frage hat zwar eine akzeptierte Antwort, aber ich denke, dies ist ein viel sauberer Weg, um den gewünschten Output zu erreichen

<select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

Das Attribut required in macht die Auswahl von .__ obligatorisch. eine Option aus der Liste.

value = "" innerhalb des Optionstags in Kombination mit dem Attribut required im select-Tag trifft die Auswahl der Option ' Select ' nicht zulässig, wodurch die erforderliche Leistung erreicht wird

0
ketan jain
<option value="" selected disabled hidden>Default Text</option>

Wenn Sie das deaktivierte Flag nicht aktivieren, wird verhindert, dass eine Option ausgewählt wird. Das ausgeblendete Flag entfernt diese Option aus der Liste. In meinem Fall habe ich es auch mit einer Enumerationsliste verwendet, und das Konzept ist das gleiche

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()">
                        <option value="" selected disabled hidden>Select Property Enum</option>
                        <option value=""></option>
                    </select>
0
Chris

Geben Sie Ihre Ansage in das erste option ein und deaktivieren Sie sie:

<selection>
    <option disabled selected>”Select a language”</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

Die erste Option ist automatisch die ausgewählte Standardeinstellung (was Sie zuerst sehen, wenn Sie das Dropdown-Menü betrachten). Das Hinzufügen des selected-Attributs ist jedoch klarer und wird tatsächlich benötigt, wenn das erste Feld ein deaktiviertes Feld ist.

Durch das disabled-Attribut wird die Option nicht auswählbar/abgeblendet.


Andere Antworten legen die Einstellung disabled=“disabled” nahe. Dies ist jedoch nur erforderlich, wenn Sie als XHTML analysieren müssen, was im Grunde eine strengere Version von HTML ist. disabled ist für Standard-HTML ausreichend.


If Sie möchten die Auswahl "erforderlich" treffen (ohne die Option "Sprache auswählen" als akzeptierte Antwort zu akzeptieren):

Fügen Sie das required-Attribut zu selection hinzu und setzen Sie das erste options value auf den leeren String ””.

<selection required>
    <option disabled value=“”>Select a language</option>
    <option>English</option>
    <option>Spanish</option>
</selection>
0
JBallin