domyślnie wybierz opcję pustą

458

Mam bardzo dziwny wymóg, w którym nie muszę domyślnie wybierać żadnej opcji w rozwijanym menu HTML. Jednak,

Nie mogę tego użyć

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Rozwiń fragment kodu

Ponieważ w tym celu będę musiał przeprowadzić walidację, aby obsłużyć pierwszą opcję. Czy ktoś może mi pomóc w osiągnięciu tego celu bez faktycznego włączenia pierwszej opcji w tagu select?

html Pankaj Parashar
źródło
2
O ile wiem, jest to jedyny sposób na uzyskanie pustej linii. Co masz na myśli, że będziesz musiał przeprowadzić walidację? Wystarczy ustawić zaznaczenie, aby powiedzieć, czy wartość = "", a następnie zwrócić wartość false.
Robert
1
Byłaby to dobra okazja, aby użyć przycisków opcji zamiast menu rozwijanego.
Blazemonger
9
Moim zdaniem wcale nie jest to dziwny wymóg. Jestem na tej samej łodzi. Potrzebuję też domyślnej opcji „brak opcji”. Mam kilka list rozwijanych, które nie są wymagane do przesłania formularza. Wyłączenie ich w ten sposób zapobiega konieczności dokonywania wyboru przez użytkownika, gdy nie jest to istotne. Dobre pytanie! +1
Scott
Nie jest to dziwne wymaganie, jeśli SELECT miał atrybut WYMAGANE, to posiadanie opcji etykiety zastępczej jest wymaganiem HTML5 dev.w3.org/html5/spec-preview/…
Testo Testini
Przyciski radiowe @Blazemonger to okropny pomysł, jeśli masz więcej niż 3 lub 4. Wyobraź sobie listę rozwijaną z ponad 15 opcjami lub 50 lub więcej? Ci mają własne problemy projektowe w wielu przypadkach, ale problem nadal stoi, że przyciski radiowe nie skalują się dobrze w ogóle .
TylerH

Odpowiedzi:

1013

Może to będzie pomocne

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Będzie wyświetlany domyślnie. Ale jeśli wybierzesz opcję, nie będziesz mógł jej wybrać ponownie.

Możesz go również ukryć, dodając pusty option

<option style="display:none">

więc nie pojawi się już na liście.

Opcja 2

Jeśli nie chcesz pisać CSS i oczekujesz tego samego zachowania powyższego rozwiązania, po prostu użyj:

<option hidden disabled selected value> -- select an option -- </option>

Zagrywka
źródło
15
Oto JSFiddle powyższego , na wypadek, gdyby ktoś go potrzebował.
Uwe Keim,
26
@azerafati, jak zauważył @Rafael_Mori, możesz to samo zarchiwizować, używając atrybutu „ukryty”, więc CSS nie jest wymagany. Po prostu czysty HTML5;)<option hidden disabled selected value> -- select an option -- </option>
BrainOverflow
Co zrobić, jeśli chcę móc go wybrać ponownie? Po prostu nie chcę, żeby cokolwiek wysyłało. Czy to możliwe?
Michael Rogers
1
dodanie ukrytego atrybutu do elementu opcji zrobiło dla mnie magię! nie spodziewałem się, że będzie to takie łatwe. dzięki
S. Domeng
Pamiętaj, że zarówno ukryty atrybut, jak i styl wyświetlania nie działają w IE, nawet 11. stackoverflow.com/questions/58862242/…
yatskovsky
113

Aby to osiągnąć, możesz użyć Javascript. Wypróbuj następujący kod:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

lub JQuery

$("#myDropdown").prop("selectedIndex", -1);
Matschie
źródło
To rozwiązanie częściowo współpracuje z Chrome 35: menu rozwijane nie pokazuje żadnego wyboru, gdy lista opcji jest niewidoczna, ale pokazuje pierwszą opcję wybraną, gdy lista opcji jest widoczna. Safari 7 zachowuje się jednak zgodnie z przeznaczeniem.
flochtililoch
Interesujące jest to: działa to przy sprawdzaniu poprawności formularza HTML. Jeśli użyjesz requiredatrybutu selectelementu i prześlesz bez wybierania opcji, sprawdzanie poprawności formularza zakończy się niepowodzeniem i powie Ci, że musisz dokonać wyboru. Dlatego naprawdę podoba mi się to podejście. (Przynajmniej testowany w Chrome)
Andreas Linnert
Nie działa (przynajmniej w obecnych przeglądarkach od tego pisania - i niepotrzebnie polega na javascript.
silentmouth
1
Od 2019 r. Tylko Safari IOS 10 odmawia gry w piłkę
Ayyash
36

Dzisiaj (2015-02-25)

Jest to poprawny HTML5 i wysyła puste miejsce (nie spację) do serwera:

<option label=" "></option>

Zweryfikowana ważność na http://validator.w3.org/check

Zweryfikowane zachowanie w Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Następujące również przechodzi sprawdzanie poprawności , co dzisiaj , , ale przekazuje również znak spacji do serwera z większości przeglądarek (prawdopodobnie nie jest to pożądane) i spacje na innych (Chrome40 / Linux przekazuje spację):

<option>&#160;</option>

Wcześniej (2013-08-02)

Zgodnie z moimi notatkami jednostka niepodzielna w obrębie tagów opcji pokazanych powyżej spowodowała następujący błąd w 2013 r .:

Błąd: Usługa sprawdzania poprawności znaczników W3C (publiczna): pierwszy element opcji podrzędnej elementu select z wymaganym atrybutem i bez atrybutu wielokrotnego, którego rozmiar to 1, musi mieć atrybut pustej wartości lub nie może zawierać treści.

W tym czasie normalne miejsce było poprawne XHTML4 i wysyłało puste (nie spację) do serwera z każdej przeglądarki:

<option> </option>

Przyszłość

Zadowoliłbym moje serce, gdyby specyfikacja została zaktualizowana, aby wyraźnie zezwalać na pustą opcję. Najlepiej przy użyciu najkrótszej składni. Każda z poniższych opcji byłaby świetna:

<option />
<option></option>

Plik testowy

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
GlenPeterson
źródło
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Rozwiń fragment kodu

Po prostu ustaw „ukryty” na opcji, którą chcesz ukryć na liście rozwijanej.

Rafael Mori
źródło
8

Rozwiązanie, które działa tylko przy użyciu CSS:

Odp .: Inline CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Rozwiń fragment kodu

B: Arkusz stylów CSS

Jeśli masz pod ręką plik CSS, możesz kierować reklamy na pierwsze optionza pomocą:

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Rozwiń fragment kodu

Kai Noack
źródło
4

To powinno pomóc:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
Rozwiń fragment kodu

Rohan Parab
źródło
Jest to najnowocześniejszy (html5) sposób spełnienia tego wymagania, należy pamiętać, że wymaga to przycisku type = prześlij. Przycisk type = z modułem obsługi przesyłania onclick nie wymaga automatycznie od użytkownika dokonania wyboru.
Arjan
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

W takim przypadku możesz uniknąć niestandardowej weryfikacji.

Fawaz
źródło
2

Tylko mała uwaga:

niektóre przeglądarki Safari wydają się nie respektować ani atrybutu „ukryty”, ani ustawienia stylu „display: none” (testowane z Safari 12.1 pod MacOS 10.12.6). Bez wyraźnego tekstu zastępczego przeglądarki te po prostu pokazują pusty pierwszy wiersz na liście opcji. Dlatego przydatne może być zawsze podanie tekstu objaśniającego do tego „obojętnego” wpisu:

<option hidden disabled selected value>(select an option)</option>

Dzięki atrybutowi „wyłączony” i tak nie zostanie aktywnie wybrany.

Andreas Rozek
źródło
1

Rozumiem, co próbujesz zrobić. Najlepszym i najskuteczniejszym sposobem jest:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
Guryash Singh
źródło
1

Uznałem to za bardzo interesujące, ponieważ niedawno doświadczyłem tego samego. Jednak natknąłem się na przykład w Internecie na temat rozwiązania tego problemu.

Bez zbędnych ceregieli zobacz poniższy fragment kodu:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Dzięki temu pozostanie nieprzesłany, ale można go wybrać w dowolnym momencie. Większa wygoda dla interfejsu użytkownika i doskonała dla doświadczenia użytkownika.

Cóż, to wszystko, mam nadzieję, że to pomoże. Twoje zdrowie!

farisfath25
źródło
Uniemożliwienie
@lofacture: dzięki za wkład. tak naprawdę kod, który napisałem, był tym, którego chciałem, ale tak, jak powiedziałeś, zależy to od potrzeb użytkownika / właściciela
farisfath25,
0

Nie ma rozwiązania HTML. Zgodnie ze specyfikacją HTML 4.01 zachowanie przeglądarki jest niezdefiniowane, jeśli żaden z optionelementów nie ma tego selectedatrybutu, a to, co robią przeglądarki w praktyce, polega na tym, że pierwsza opcja jest wstępnie wybrana.

Aby obejść ten problem, można zastąpić selectelement zestawem input type=radioelementów (z tym samym nameatrybutem). Tworzy to kontrolę tego samego rodzaju, jednak z innym wyglądem i interfejsem użytkownika. Jeśli żaden z input type=radioelementów nie ma tego checkedatrybutu, żaden z nich nie jest początkowo wybrany w większości nowoczesnych przeglądarek.

Jukka K. Korpela
źródło
0

Używam frameworka Laravel 5 i odpowiedź @Gambi również zadziałała dla mnie, ale z pewnymi zmianami w moim projekcie.

Mam wartości opcji w tabeli bazy danych i używam ich z instrukcją foreach. Ale przed stwierdzeniem dodałem opcję z sugerowanymi ustawieniami @Gambit i zadziałało.

Oto mój przykład:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Mam nadzieję, że to też komuś pomoże. Tak trzymaj!

LOG Oracle
źródło
0

Spróbuj tego:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Pierwsza opcja w menu byłaby pusta.

Abhijit pai
źródło
0

Aby wyświetlić, wybierz wartość z listy rozwijanej i ukryj ją po wybraniu określonej wartości. użyj poniższego kodu.

będzie również obsługiwać wymaganą weryfikację.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Rozwiń fragment kodu

Bathri Nathan
źródło
0

Jeśli używasz Angulara (2+), (lub innego frameworka), możesz dodać trochę logiki. Logika wyglądałaby następująco: wyświetl pustą opcję tylko wtedy, gdy użytkownik jeszcze nie wybrał żadnej innej opcji. Po wybraniu opcji przez użytkownika pusta opcja znika.

W przypadku Angulara (9) wyglądałoby to mniej więcej tak:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
Mike de Klerk
źródło
-2

Spróbuj tego:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Sprawdza poprawność w HTML5. Działa z requiredatrybutem w elemencie select. Można ponownie wybrać. Działa w Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

Tristan Bailey
źródło