Standardtext, der nicht in der Dropdown-Liste angezeigt wird

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?

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:

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.

Hier ist die Lösung:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

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:

• Das selectedAttribut, um es ausgewählt standardmäßig
• Das disabledAttribut, damit es vom Benutzer nicht ausgewählt werden kann
• display: none, um es aus der Werteliste auszublenden

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

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.

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

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.

<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.

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