Standardtext, der nicht in der Dropdown-Liste angezeigt wird

107

Ich habe eine, selectdie zunächst Sprache auswählen anzeigt , bis der Benutzer eine Sprache auswählt. Wenn der Benutzer die Auswahl öffnet, möchte ich nicht, dass eine Auswahloption angezeigt wird, da dies keine tatsächliche Option ist.

Wie kann ich das erreichen?

Vitalii Ponomar
quelle

Antworten:

214

Kyles Lösung hat für mich einwandfrei funktioniert, also habe ich meine Nachforschungen angestellt, um Js und CSS zu vermeiden, aber nur bei HTML zu bleiben. Wenn Sie selecteddem Element, das als Kopfzeile angezeigt werden soll, einen Wert von hinzufügen, wird es zunächst als Platzhalter angezeigt. Etwas wie:

<option selected disabled>Choose here</option>

Das vollständige Markup sollte folgendermaßen aussehen:

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Sie können sich diese Geige ansehen und hier ist das Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie nicht möchten, dass die Art des Platzhaltertextes in den Optionen aufgeführt wird, sobald ein Benutzer auf das Auswahlfeld klickt, fügen Sie das hiddenAttribut wie folgt hinzu:

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Überprüfen Sie die Geige hier und den Screenshot unten.

Geben Sie hier die Bildbeschreibung ein

Nobita
quelle
Dies ist eine gute Antwort, aber wenn Sie Angular JS verwenden, funktioniert es nicht, da Angular automatisch eine leere Option hinzufügt und diese als Standard
festlegt
Wie auch immer, nur als Referenz, hier ist, wie Sie in Angular vorgehen würden, kombinieren Sie einfach den obigen Ansatz mit dem hier erläuterten Angular-spezifischen metaltoad.com/blog/…
Nobita
Beachten Sie, dass das hiddenAttribut , oben in der Antwort verwendet wird , ist ein Attribut , das auf einem beliebigen HTML - Element eingestellt werden kann, und ist in der Regel (aber nicht notwendigerweise) umgesetzt entspricht der Einstellung zu sein display: nonemit CSS.
Mark Amery
2
Beachten Sie auch , dass Einstellung hiddenauf ein optionin einem selectnicht funktioniert in Safari, auf beiden iOS oder Mac. Diese Antwort bietet daher nur teilweise Browserunterstützung.
Mark Amery
1
Das ist schön!
Fibo Kowalsky
59

Hier ist die Lösung:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>
Prabhu
quelle
5
Beachten Sie, dass dies selected="true"ungültig ist. Verwenden Sie stattdessen selected="selected"in (X) HTML oder nur selectedin HTML. Es scheint, dass Sie selectedAttribut mit selectedEigenschaft verwechselt haben , die wie folgt geändert wird: myOption.selected = true;odermyOption.selected = false;
Oriol
2
"display: none" wird von Browsern ignoriert, die geräteeigene Auswahlmöglichkeiten wie Android und iOS verwenden. Sie müssen die Option aus DOM in select.focus entfernen und zurückgeben und in select.blur auswählen, damit sie funktioniert.
Radek Pech
-1; wie Nobita Antwort mithidden (die „in CSS implementiert typischerweise“ verwendet display: nonesowieso), mit display: noneauf einem optionnicht funktioniert in Safari; Die Option wird weiterhin angezeigt.
Mark Amery
49

Der richtige und semantische Weg ist die Verwendung einer Platzhalter-Beschriftungsoption :

  • Fügen Sie ein optionElement als erstes untergeordnetes Element von hinzuselect
  • Stellen Sie das einvalue= ""option
  • Legen Sie den Platzhaltertext als Inhalt fest option
  • Fügen Sie das requiredAttribut dem hinzuselect

Dadurch wird der Benutzer gezwungen , eine andere Option zu wählen , um der Lage zu sein , das Formular zu senden, und Browser sollten machen das optionwie gewünscht:

Wenn ein Auswahlelement eine Platzhalter-Beschriftungsoption enthält, wird vom Benutzeragenten erwartet, dass er diese Option so rendert, dass sie eine Beschriftung und keine gültige Option des Steuerelements darstellt.

Die meisten Browser rendern es jedoch wie gewohnt option. Wir müssen das Problem also manuell beheben, indem wir Folgendes hinzufügen option:

select > .placeholder {
  display: none;
}
<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Oriol
quelle
Es sollte beachtet werden, dass selbst dies (was der gründlichste Versuch ist, dieses Problem aus allen Antworten hier zu lösen) auf Safari weder unter iOS noch unter Mac funktioniert. Die Option bleibt bestehen, wenn die Auswahl geöffnet wird.
Mark Amery
@MarkAmery Ich schlage vor, Sie mögen das, was in der @ Nobita-Antwort vorgeschlagen wird, und fügen das hiddenAttribut einfach dem Platzhalter-Options-Tag hinzu, anstatt den Eindruck zu erwecken, display: nonedass die meisten mobilen Browser das display: noneCSS-Attribut ignorieren und es meiner Meinung nach noch semantisch korrekter ist.
Gaboik1
@ Gaboik1 In den Kommentaren zu dieser Antwort habe ich festgestellt, dass dies hiddenim Allgemeinen wie display: noneunter der Haube implementiert wird (und die Spezifikation schlägt dies ausdrücklich als "typische" Implementierung vor). Daher wäre ich überrascht, wenn es Browser gäbe - mobil oder anderweitig -, die hiddenfunktionierten, display: noneaber nicht funktionierten. Können Sie ein Beispiel nennen?
Mark Amery
21

Da Sie keine Platzhalter für selectTags zuweisen können , glaube ich nicht, dass es eine Möglichkeit gibt, mit reinem HTML / CSS genau das zu tun, was Sie verlangen. Sie können jedoch Folgendes tun:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

"Sprache auswählen" wird in der Dropdown-Liste angezeigt. Sobald jedoch eine andere Option ausgewählt ist, kann sie nicht erneut ausgewählt werden.

Ich hoffe das hilft.

Kyle
quelle
2
Ich fand, dass das Beste die Kombination aus deaktiviert und ausgewählt mit style = "display: none;" ist. Deaktiviert ist nützlich, wenn Sie eine Validierung durchführen möchten. Dadurch wird sichergestellt, dass standardmäßig keine aktivierte Option ausgewählt ist.
Illarion Kovalchuk
-1, weil andere Antworten hier (insbesondere die von Nobtia und Oriol) sowohl viel erklärendere Details als auch viel umfassendere Lösungen liefern.
Mark Amery
7

Versuche dies:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

Im CSS:

.selectSelection option:first-child{
    display:none;
}
Aakash
quelle
Diese Antwort enthält nichts, was andere Antworten nicht detaillierter enthalten, und sie weist eine schlechte Formatierung auf. -1.
Mark Amery
5

Ich habe eine Lösung mit einer Spanne, die über der Auswahl angezeigt wird, bis eine Auswahl erfolgt ist. Der Bereich zeigt die Standardnachricht an und ist daher nicht in der Liste der Vorschläge enthalten:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (mit JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

Ich habe eine jsfiddle für die Demo gemacht . Getestet mit Firefox und IE8.

Baldrick
quelle
Chrome unter OSX zeigt immer die erste ausgewählte Option an, scheint jedoch OSX-spezifisch zu sein, da alle hier bereitgestellten Lösungen dazu führen, dass die erste sichtbare Option ausgewählt wird.
Gamadril
statt spandort zu benutzen legendund das wäre perfekt oderlabel
karlcow
Dies ist ein interessanter Ansatz und der einzig mögliche Weg, dieses Verhalten auf Safari zum Laufen zu bringen, aber es ist hier schlecht implementiert. Sie benötigen mindestens eine pointer-events: noneZeitspanne, damit Klicks zur Auswahl weitergeleitet werden können.
Mark Amery
0
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

Sie können das CSS natürlich in eine CSS-Datei verschieben, wenn Sie möchten, und ein Skript einfügen, um die escSchaltfläche abzufangen und die deaktivierte Datei erneut auszuwählen. Im Gegensatz zu den anderen ähnlichen Antworten, die ich gegeben habe value="", ist dies so, dass wenn Sie die Werte Ihrer Auswahlliste mit einem Formular senden, es nicht "etwas ausgewählt" enthält. In asp.net wird mvc 5 als json kompiliert mit kompiliert var obj = { prop:$('#ddl').val(),...};und JSON.stringify(obj);der Wert von prop ist null.

Anders M.
quelle
0

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​
Ed Manz
quelle