Standard-text, der nicht angezeigt im drop-down-Liste

Ich habe eine select dem zunächst zeigt Sprache Wählen, bis der Benutzer eine Sprache ausgewählt. Wenn der Benutzer auswählen wird geöffnet, ich möchte es nicht zu zeigen Sprache Wählen option, weil es nicht eine tatsächliche option.

Wie kann ich das erreichen?

InformationsquelleAutor Vitalii Ponomar | 2012-02-25

html html-select

195

Kyle ' s Lösung arbeitete für mich vollkommen in Ordnung, so habe ich meine Forschung, um zu vermeiden, dass alle Js und CSS, aber nur kleben mit HTML.
Hinzufügen einen Wert von selected zu dem Element angezeigt werden soll als header zwingt ihn zu zeigen, in Erster Linie als Platzhalter.
So etwas wie:
```
<option selected disabled>Choose here</option>
```
Den kompletten markup sollte entlang diesen Linien:
```
<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>
```
Können Sie einen Blick auf diese fiddle, und hier ist das Ergebnis:

Wenn Sie nicht wollen die Art von Platzhalter-text erscheinen in den Optionen, wenn ein Benutzer klickt auf den select-box fügen Sie nur die hidden - Attribut wie folgt:
```
<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 Fiedel hier und die Abbildung unten.
- Dies ist eine große Antwort, aber bei der Verwendung von Angular JS, dann funktioniert es nicht, da Eckige fügt automatisch eine leere option und legt es als Standard
- Sowieso, nur als Referenz, hier ist, wie Sie tun würden, in Winkel, kombinieren Sie einfach die oben genannten Ansatz mit den Eckigen bestimmten hier erklärt metaltoad.com/blog/...
- Beachten Sie, dass die hidden - Attribut, die in der Antwort oben, ist ein Attribut, das gesetzt werden kann auf jedes beliebige HTML-element, und ist in der Regel (aber nicht notwendigerweise) umgesetzt werden, entspricht der Einstellung display: none mit CSS.
- Beachten Sie auch, dass die Einstellung hidden auf eine option im select funktioniert nicht in Safari auf iOS oder Mac. Diese Antwort bietet somit nur teilweise browser-Unterstützung.
- Noch, dies ist ein Versuch zur Lösung des Problems auf der hand unter Verwendung der besten Praktiken, progressive enhancement und keine hacks. Auch die erste option nicht auswählbar (deaktiviert), so dass die usability auf allen Plattformen ist gewahrt, als auch
- Möglich ist, kann ich die Farbe hinzufügen, so dass Kunden können wählen Sie die Farbe anstelle von text Optionen wie,, Farben rot, blau Farbe anstelle von einem, zwei Werte,
InformationsquelleAutor Nobita
53

Hier ist die Lösung:
```
<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>
```
- Beachten Sie, dass selected="true" ist ungültig. Verwenden Sie stattdessen selected="selected" in (X)HTML-oder nur selected im HTML-Format. Es scheint, Sie verwechseln selected Attribut mit selected Eigenschaft, die geändert wird, wie diese: myOption.selected = true; oder myOption.selected = false;
- "display: none" wird ignoriert von Browsern, verwenden Sie den Geräte-native wählt wie Android und iOS. Sie müssen entfernen Sie die option aus dem DOM-in wählen.Fokus und bringen Sie es und wählen Sie ihn im wählen.Weichzeichnen, damit es funktioniert.
- -1; wie Nobita ' s Antwort mit hidden (das "in der Regel implementiert in CSS" mit display: none sowieso), mit display: none auf eine option funktioniert nicht in Safari; die option noch angezeigt wird.
InformationsquelleAutor Prabhu
46

Den richtigen und semantische Methode ist mit einem Platzhalter-label-option:
- Hinzufügen eines - option element als erstes Kind des select
- Set value= "" zu, dass option
- Setzen Sie den Platzhalter-text als Inhalt option
- Fügen Sie die erforderlich Attribut der select
Dies zwingt den Benutzer zur Auswahl einer anderen option, um der Lage sein, das Formular zu senden, und der Browser sollte Rendern die option wie gewünscht:

Wenn ein select-element enthält eine Platzhalter-label-option, die Benutzer
agent erwartet zu erbringen, dass die option in einer Weise, die vermittelt, dass
es ist ein label, sondern als eine gültige Möglichkeit der Kontrolle.

Jedoch die meisten Browser Rendern wird es wie ein normales option. So werden wir zu tun haben, beheben Sie es manuell, indem Sie den folgenden, um die option:
- Die ausgewählt - Attribut, um es ausgewählt standardmäßig
- Die deaktiviert - Attribut, um es nicht-wählbar durch den Anwender
- display: none, um es zu verbergen aus der Liste der Werte
CSS:
```
select > .placeholder {
  display: none;
}
```
HTML:
```
<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
```
- Es sollte angemerkt werden, dass auch diese (das ist die gründlichste Versuch, dieses problem zu lösen aus all den Antworten hier) funktioniert nicht auf Safari, entweder auf iOS oder Mac. Die option wird immer noch als das wählen wird geöffnet.
- Ich schlage vor, Sie tun, wie es vorgeschlagen @Nobita Antwort, und fügen Sie einfach die hidden - Attribut, um die option Platzhalter-tag statt display: none wie es scheint, dass die meisten mobilen Browser ignorieren die display: none CSS-Attribut, und es ist sogar mehr semantisch korrekt meiner Meinung nach.
- In den Kommentaren auf, dass die Antwort, die ich darauf hingewiesen, dass hidden ist im Allgemeinen implementiert, wie display: none unter der Haube (und die Spezifikation weist ausdrücklich darauf hin, dies als eine "typische" Realisierung). Als solche, ich würde sein überrascht, wenn es irgendwelche Browser -, mobile-oder sonst - wo hidden gearbeitet, aber display: none nicht. Können Sie irgendwelche Muster?
InformationsquelleAutor Oriol
21

Weil Sie nicht verwenden können, weisen Sie Platzhalter für select tags, ich glaube nicht, dass es irgendeinen Weg gibt, genau das zu tun, was Sie für Fragen mit reinem HTML/CSS. Sie können jedoch etwas tun, wie dieses:
```
<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>
```
"Sprache auswählen" in der dropdown-Liste auswählen, aber wenn eine andere option ausgewählt ist, wird es nicht möglich sein es erneut.

Ich hoffe, das hilft.
- Ich fand, dass das beste ist die Kombination aus deaktiviert und aktiviert, die Sie mit style="display:none;". deaktiviert ist nützlich, wenn Sie wollen, um die Validierung - es stellt sicher, dass Sie keine aktivierten option standardmäßig aktiviert.
- -1, weil die anderen Antworten hier (insbesondere Nobtia und Oriol ' s) bieten beide viel mehr erklärende Details und vieles mehr komplette Lösungen.
InformationsquelleAutor Kyle

Versuchen Sie dies:

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

In der CSS:

.selectSelection option:first-child{
    display:none;
}

Diese Antwort enthält nichts, die anderen Antworten nicht auch enthalten in mehr detail, plus es hat schlechte Formatierung; -1.

InformationsquelleAutor Aakash

Habe ich eine Lösung mit einer Spannweite oben dargestellt, ist der select, bis eine Auswahl erfolgt. Die Spannweite zeigt die Standard-Nachricht, und so ist es nicht in der Liste der Vorschläge:

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();
        }
    });
});

Habe ich eine jsfiddle demo. Getestet mit Firefox und IE8.

Chrome auf OSX zeigt immer die erste option ausgewählt ist, aber es scheint OSX spezifisch, weil alle Lösungen, die hier bereitgestellt werden, führt auf die erste option sichtbar ausgewählt werden.
statt span dort verwenden legend und das wäre perfekt oder label
Dies ist ein interessanter Ansatz, und die einzige Möglichkeit, die ich sehe, um dieses Verhalten zu arbeiten, auf Safari, aber es ist schlecht umgesetzt hier; müssen Sie mindestens pointer-events: none auf Ihre Spannweite zu ermöglichen, Klicks passieren zu wählen.

InformationsquelleAutor Baldrick

0
```
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
```
können Sie natürlich bewegen Sie den css in eine css-Datei, wenn Sie wollen, und setzen ein Skript zu fangen, die esc Schaltfläche, um die wieder deaktiviert. Im Gegensatz zu den anderen ähnliche Antworten, die ich gestellt value="", das ist so, wenn Sie senden Sie die Wert(E) der select-Liste mit einem Formular, wird es nicht enthalten, die "für etwas". In asp.net mvc 5 gesendet als json zusammengestellt var obj = { prop:$('#ddl').val(),...}; und JSON.stringify(obj); den Wert der prop null.

InformationsquelleAutor Anders M.

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');

InformationsquelleAutor Ed Manz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.