Leeres HTML-SELECT ohne leeres Element in der Dropdown-Liste

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 standardmäßigen leeren Wert implementieren, der in der Dropdown-Liste versteckt ist?

Verwenden Sie einfach deaktivierte und/oder versteckte Attribute:

<option selected disabled hidden style="display: none" value=""></option>

• selected macht diese Option zur Standardeinstellung.
• disabled macht diese Option nicht anklickbar.
• style="display: none" bewirkt, dass diese Option in älteren Browsern nicht angezeigt wird. Sehen: Kann ich benutzen Dokumentation für verstecktes Attribut.
• hidden bewirkt, dass diese Option nicht in der Dropdown-Liste angezeigt wird.

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

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

Einfach nutzen

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

funktioniert überall ohne Skript und erlaubt Ihnen gleichzeitig, den Benutzer zu instruieren.

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

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

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

Du kannst nicht. Sie funktionieren einfach nicht so. Bei einem Dropdown-Menü muss immer eine der Optionen ausgewählt sein.

Sie könnten (obwohl ich es nicht empfehle) nach a Ausschau halten Rückgeld event und verwenden Sie dann JS, um die erste Option zu löschen, wenn sie leer ist.

Für reines HTML hat @isherwood eine großartige Lösung. Geben Sie für jQuery Ihrer Auswahl 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 fügen Sie es in eine eigene Funktion ein:

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

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