Leeres HTML SELECT ohne leeres Element in der Dropdown-Liste

110

Wie subj implementieren?

wenn ich schreibe:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

dann ist das standardmäßig ausgewählte Element "aaaa"

wenn ich schreibe:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

Dann ist das standardmäßig ausgewählte Element leer, aber dieses leere Element wird in der Dropdown-Liste angezeigt.

Wie kann ich ein SELECT-Tag mit einem leeren Standardwert implementieren, der in der Dropdown-Liste versteckt ist?

Nick Stavrogin
quelle
Mögliches Duplikat der Standardauswahloption als leer
Blazemonger

Antworten:

182

Verwenden Sie einfach deaktivierte und / oder versteckte Attribute:

<option selected disabled hidden style='display: none' value=''></option>
  • selected macht diese Option zur Standardoption.
  • disabled macht diese Option nicht anklickbar.
  • style='display: none'macht diese Option in älteren Browsern nicht angezeigt. Siehe: Kann ich Dokumentation für versteckte Attribute verwenden?
  • hidden Diese Option wird nicht in der Dropdown-Liste angezeigt.
Eduardo
quelle
3
Tatsächlich zeigt IE 11 die Option "versteckt" an.
Edward Olamisan
6
Webkit scheint das Attribut "versteckt" nicht zu unterstützen
Ethan Reesor
2
Wie in Kann ich verwenden erwähnt , ist das hiddenAttribut effektiv display: none, um ältere Browser zu unterstützen:<option selected disabled hidden style='display: none' value=''></option>
Neta
66

Sie können durch Einstellung selectedIndexzu -1verwenden .prop: http://jsfiddle.net/R9auG/ .

Verwenden Sie für ältere jQuery-Versionen .attranstelle von .prop: http://jsfiddle.net/R9auG/71/ .

pimvdb
quelle
@IronicMuffin: Danke; gerade getestet und scheint in der Tat auf allen gängigen Browsern zu funktionieren.
Pimvdb
@ zobidafly: Danke für die Bearbeitung; Ich habe ein wenig ausgearbeitet.
Pimvdb
1
.attrwird in neuen jQuery-Versionen fehlschlagen. Der Versuch, klug zu sein, brachte mich zum Scheitern.
Carson Ip
33

Einfach benutzen

<option value="" selected disabled>Please select an option...</option>

funktioniert überall ohne Skript und ermöglicht es Ihnen, den Benutzer gleichzeitig zu instruieren.

mvreijn
quelle
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Andrey R.
quelle
1
ff / chrome - ok, opera / ie7-9 - nicht ok das kannst du hier testen (mit oder ohne js): jsfiddle.net/R9auG/145 also empfehle ich js-Approach von @pimvdb
tibalt
11

Hier ist eine einfache Möglichkeit, dies mit einfachem JavaScript zu tun. Dies ist das Vanille-Äquivalent des von pimvdb veröffentlichten jQuery-Skripts. Sie können es hier testen .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

Stellen Sie sicher, dass "id_here" im Formular und im JavaScript übereinstimmt.

Mingwei Samuel
quelle
3

Das kannst du nicht. Sie funktionieren einfach nicht so. In einem Dropdown-Menü muss immer eine seiner Optionen ausgewählt sein.

Sie können (obwohl ich es nicht empfehle) nach einem Änderungsereignis suchen und dann JS verwenden, um die erste Option zu löschen, wenn sie leer ist.

QUentin
quelle
3
Warum empfehlen Sie dieses Verhalten nicht?
Josh Noe
Es gibt viele Fälle, in denen der Benutzer aktiv etwas aus einer Liste auswählen soll. Ich denke nicht, dass JS der optimalste Weg ist (obwohl es der einzige Weg zu sein scheint), aber ich denke wirklich, dass es einen Weg geben sollte .
QWERTY
2

Für reines HTML hat @isherwood eine großartige Lösung. Geben Sie für jQuery Ihrer Auswahl-Dropdown-Liste eine ID und wählen Sie sie dann mit jQuery aus:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

Verwenden Sie dann diese jQuery, um das Dropdown-Menü beim Laden der Seite zu löschen:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

Oder setzen Sie es in eine Funktion für sich:

$('#myDropDown').val(''); 

Erreicht das, wonach Sie suchen, und es ist einfach, dies in Funktionen zu integrieren, die möglicherweise auf Ihrer Seite aufgerufen werden, wenn Sie das Dropdown-Menü ausblenden müssen, ohne die Seite neu zu laden.

Jason Slobotski
quelle
0

Sie können dieses Snippet ausprobieren

$("#your-id")[0].selectedIndex = -1

Es hat bei mir funktioniert.

Shenbag
quelle
1
Es ist am besten, ein jsfiddle.net zur Antwort beizufügen , um eine klarere Erklärung zu erhalten.
Anonym
1
Dies setzt voraus, dass das OP jQuery verwendet.
evanrmurphy