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

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

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.

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

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.

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.

Sie können dieses Snippet ausprobieren

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

Es hat bei mir funktioniert.