Pusty HTML SELECT bez pustej pozycji na liście rozwijanej

110

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?

Nick Stavrogin
źródło
Możliwy duplikat domyślnej opcji wyboru jako pustej
Blazemonger

Odpowiedzi:

182

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.
Eduardo
źródło
3
W rzeczywistości IE 11 wyświetla opcję „ukryta”.
Edward Olamisan
6
Wydaje się, że Webkit nie obsługuje atrybutu „ukryty”
Ethan Reesor
2
Jak wspomniano w Can I Use , hiddenatrybut jest skuteczny display: none, więc do obsługi starszych przeglądarek:<option selected disabled hidden style='display: none' value=''></option>
Neta
66

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

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

pimvdb
źródło
@IronicMuffin: Dzięki; właśnie przetestowany i wydaje się, że faktycznie działa na wszystkich popularnych przeglądarkach.
pimvdb
@zobidafly: Dzięki za edycję; Trochę się wyjaśniłem.
pimvdb
1
.attrnie powiedzie się w nowych wersjach jQuery. Próbując być mądrym, zawiodłem.
Carson Ip,
33

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.

mvreijn
źródło
25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
Andrey R.
źródło
1
ff / chrome - ok, opera / ie7-9 - nie ok, możesz to przetestować tutaj (z lub bez js): jsfiddle.net/R9auG/145, więc polecam podejście js autorstwa @pimvdb
tibalt
11

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.

Mingwei Samuel
źródło
3

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.

Quentin
źródło
3
Dlaczego nie polecasz tego zachowania?
Josh Noe
Istnieje wiele przypadków, w których chcesz, aby użytkownik aktywnie wybrał coś z listy. Nie sądzę, że JS jest najbardziej optymalnym sposobem na zrobienie tego (chociaż wydaje mi się, że jest to jedyny sposób), ale naprawdę uważam, że powinien być sposób.
qwerty
2

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.

Jason Slobotski
źródło
0

Możesz spróbować tego fragmentu

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

U mnie to zadziałało.

Shenbag
źródło
1
Najlepiej byłoby zapewnić plik jsfiddle.net, aby dołączyć do odpowiedzi, aby zapewnić jaśniejsze wyjaśnienie.
Anonimowy
1
Zakłada się, że OP używa jQuery.
evanrmurphy