Pusty HTML SELECT bez pustej pozycji na liście rozwijanej

Jak wdrożyć subj?

kiedy piszę:

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

to domyślny wybrany element to „aaaa”

kiedy piszę:

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

wtedy domyślnie wybrany element jest pusty, ale ten pusty element jest wyświetlany na liście rozwijanej.

jak mogę zaimplementować tag SELECT z domyślną pustą wartością ukrytą na liście rozwijanej?

Po prostu użyj atrybutów wyłączonych i / lub ukrytych:

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

• selected ustawia tę opcję jako domyślną.
• disabled sprawia, że ​​ta opcja jest niemożliwa do kliknięcia.
• style='display: none'sprawia, że ​​ta opcja nie jest wyświetlana w starszych przeglądarkach. Zobacz: Czy mogę użyć dokumentacji dla ukrytego atrybutu.
• hidden sprawia, że ​​ta opcja nie jest wyświetlana na liście rozwijanej.

Można przez ustawienie selectedIndexdo -1korzystania .prop: http://jsfiddle.net/R9auG/ .

W przypadku starszych wersji jQuery .attrzamiast .prop: http://jsfiddle.net/R9auG/71/ .

Po prostu używając

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

będzie działać w dowolnym miejscu bez skryptu i umożliwi jednoczesne instruowanie użytkownika.

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

Oto prosty sposób na zrobienie tego przy użyciu zwykłego JavaScript. To jest waniliowy odpowiednik skryptu jQuery opublikowany przez pimvdb. Możesz to przetestować tutaj .

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

Upewnij się, że „id_here” pasuje w formularzu iw kodzie JavaScript.

Nie możesz. Po prostu nie działają w ten sposób. W menu rozwijanym musi być zawsze zaznaczona jedna ze swoich opcji.

Możesz (chociaż nie polecam tego) obserwować zdarzenie zmiany , a następnie użyć JS do usunięcia pierwszej opcji, jeśli jest pusta.

Dla czysto html @isherwood ma świetne rozwiązanie. W przypadku jQuery nadaj rozwijanej liście wyboru identyfikator, a następnie wybierz go z jQuery:

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

Następnie użyj tego jQuery, aby wyczyścić menu rozwijane podczas ładowania strony:

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

Lub umieść go w samej funkcji:

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

spełnia to, czego szukasz i łatwo jest to umieścić w funkcjach, które mogą zostać wywołane na Twojej stronie, jeśli chcesz wyczyścić menu bez ponownego ładowania strony.

Możesz spróbować tego fragmentu

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

U mnie to zadziałało.