it-swarm.com.de

HTML select: Wie wird ein Standardtext festgelegt, der nicht in der Dropdown-Liste angezeigt wird?

Ich habe eine select, die zunächst Sprache auswählen zeigt, bis der Benutzer eine Sprache auswählt. Wenn der Benutzer die Auswahl öffnet, möchte ich nicht, dass die Option Select language angezeigt wird, da dies keine Option ist.

88
Vitalii Ponomar

Kyles Lösung hat für mich sehr gut funktioniert, also habe ich meine Recherchen gemacht, um Js und CSS zu vermeiden, aber ich halte mich an HTML . Hinzufügen des Werts selected zu dem Element, das wir als Kopfzeilenkräfte anzeigen möchten es ist in erster Linie als Platzhalter zu zeigen. So etwas wie:

<option selected disabled>Choose here</option>

Das vollständige Markup sollte wie folgt 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 einen Blick auf diese Geige werfen, und hier ist das Ergebnis:

 enter image description here

Wenn nicht die Art von Platzhaltertext in den Optionen angezeigt werden soll, sobald ein Benutzer auf das Auswahlfeld klickt, fügen Sie das hidden-Attribut 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.

 enter image description here

183
Nobita

Hier ist die Lösung:

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

Die richtige und semantische Methode verwendet eine Platzhalterbeschriftungsoption :

  • Fügen Sie ein option Element als erstes Kind der select hinzu.
  • Setze value= "" auf diese option
  • Legen Sie den Platzhaltertext als Inhalt dieser option fest.
  • Fügen Sie der Variablen required das Attribut select hinzu.

Dadurch wird der Benutzer gezwungen, eine andere Option auszuwählen, um das Formular senden zu können, und Browser sollten rendern die option wie gewünscht:

Wenn ein select-Element eine Platzhalterbeschriftungsoption enthält, wird der Benutzer Von einem Agenten wird erwartet, dass er diese Option auf eine Weise rendert, die diese .__ vermittelt. Es ist eine Beschriftung und keine gültige Option des Steuerelements.

Die meisten Browser rendern es jedoch als normale option. Daher müssen wir das Problem manuell beheben, indem wir der option Folgendes hinzufügen:

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

45
Oriol

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

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

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

Ich hoffe das hilft.

19
Kyle

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

Ich habe eine Lösung mit einer Spannweite, die über der Auswahl angezeigt wird, bis eine Auswahl getroffen wird. 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 ein jsfiddle für Demo gemacht. Getestet mit Firefox und IE8.

5
Baldrick
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

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

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