459

Ho un requisito molto strano, in cui mi viene richiesto di non avere alcuna opzione selezionata per impostazione predefinita nel menu a discesa in HTML. Però,

Non posso usare questo

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Espandi frammento

Perché, per questo, dovrò fare la validazione per gestire la prima opzione. Qualcuno può aiutarmi a raggiungere questo obiettivo senza effettivamente includere la prima opzione come parte del tag select?

html

— Pankaj Parashar
fonte

2

Per quanto ne so, questo è l'unico modo per ottenere una riga vuota. Cosa vuoi dire che dovrai fare la validazione? Basta impostare un segno di spunta per dire se value = "" quindi restituire false.

— Robert,

1

Questa sarebbe una buona opportunità per utilizzare i pulsanti di opzione anziché un menu a discesa.

— Blazemonger,

9

A mio avviso, non è affatto un requisito strano. Sono nella stessa barca. Ho anche bisogno di un'impostazione predefinita "nessuna opzione". Ho diversi menu a discesa che non sono richiesti per inviare un modulo. Disabilitarli in questo modo impedisce all'utente di effettuare una selezione quando non è pertinente. Buona domanda! +1

— Scott,

Non è un requisito strano, se SELEZIONA aveva un attributo RICHIESTO, avere un'opzione segnaposto è un requisito di HTML5 dev.w3.org/html5/spec-preview/…

— Testo Testini

I pulsanti di opzione @Blazemonger sono una pessima idea se hai più di 3 o 4. Immagina un elenco a discesa con più di 15 opzioni o 50 o più? Coloro che hanno i propri problemi di progettazione, in molti casi, ma il problema sta ancora pulsanti di opzione che non scala bene a tutti .

— TylerH,

1015

Forse questo sarà utile

<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 --Verrà visualizzato per impostazione predefinita. Ma se si sceglie un'opzione, non sarà possibile selezionarla nuovamente.

Puoi anche nasconderlo usando aggiungendo un vuoto option

<option style="display:none">

quindi non verrà più visualizzato nell'elenco.

opzione 2

Se non vuoi scrivere CSS e ti aspetti lo stesso comportamento della soluzione sopra, usa solo:

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

— Gambetto
fonte

15

Ecco un JSFiddle di quanto sopra , nel caso qualcuno ne abbia bisogno.

— Uwe Keim,

26

@azerafati come ha sottolineato @Rafael_Mori è possibile archiviare lo stesso utilizzando l'attributo "nascosto", quindi non è necessario alcun CSS. Solo puro HTML5;)<option hidden disabled selected value> -- select an option -- </option>

— BrainOverflow

Cosa succede se voglio essere in grado di selezionarlo nuovamente? Non voglio che mandi nulla. È possibile?

— Michael Rogers,

1

l'aggiunta di un attributo nascosto all'elemento opzione ha fatto la magia per me! non mi aspettavo che fosse così facile. grazie

— S. Domeng

Essere consapevoli, sia attributo Nascosto e stile di visualizzazione non funzionano in IE, anche 11. stackoverflow.com/questions/58862242/...

— yatskovsky

113

È possibile utilizzare Javascript per raggiungere questo obiettivo. Prova il seguente codice:

HTML

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

JS

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

o JQuery

$("#myDropdown").prop("selectedIndex", -1);

— Matschie
fonte

Questa soluzione funziona parzialmente con Chrome 35: il menu a discesa non mostra alcuna selezione quando l'elenco di opzioni è invisibile, ma mostra la prima opzione selezionata quando l'elenco di opzioni è reso visibile. Safari 7 si comporta come previsto però.

— flochtililoch,

La cosa interessante è: funziona con la convalida del modulo HTML. Se usi l' requiredattributo selectsull'elemento e invii senza selezionare un'opzione, la convalida del modulo fallirà e ti dirà, devi effettuare una selezione. Pertanto mi piace molto questo approccio. (Almeno testato in Chrome)

— Andreas Linnert,

Non funziona (almeno nei browser attuali al momento della stesura di questo - e si basa inutilmente su javascript.

— silentmouth,

1

A partire dal 2019, solo Safari IOS 10 si rifiuta di giocare a palla con questo

— Ayyash

37

Oggi (25-02-2015)

Questo è HTML5 valido e invia uno spazio (non uno spazio) al server:

<option label=" "></option>

Validità verificata su http://validator.w3.org/check

Comportamento verificato con Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Di seguito passa anche la convalida oggi , ma passa anche una sorta di carattere spaziale al server dalla maggior parte dei browser (probabilmente non desiderabile) e uno spazio vuoto su altri (Chrome40 / Linux passa uno spazio vuoto):

<option>&#160;</option>

In precedenza (2013-08-02)

Secondo le mie note, l'entità non-break-space all'interno dei tag di opzione mostrati sopra ha prodotto il seguente errore nel 2013:

Errore: W3C Markup Validaton Service (pubblico): il primo elemento opzione figlio di un elemento select con un attributo richiesto e senza un attributo multiplo, e la cui dimensione è 1, deve avere un attributo di valore vuoto o non deve avere contenuto di testo.

A quel tempo, uno spazio regolare era XHTML4 valido e inviava uno spazio vuoto (non uno spazio) al server da ogni browser:

<option> </option>

Futuro

Mi farebbe molto piacere se le specifiche fossero state aggiornate per consentire esplicitamente un'opzione vuota. Preferibilmente usando la sintassi più breve. Uno dei seguenti sarebbe fantastico:

<option />
<option></option>

File di prova

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

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>

Espandi frammento

Basta mettere "nascosto" sull'opzione che si desidera nascondere nell'elenco a discesa.

— Rafael Mori
fonte

8

Soluzione che funziona solo utilizzando CSS:

A: CSS in linea

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

Espandi frammento

B: foglio di stile CSS

Se hai un file CSS a portata di mano, puoi scegliere come target il primo optionutilizzando:

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>

Espandi frammento

— Kai Noack
fonte

4

Questo dovrebbe aiutare:

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>

Espandi frammento

— rohan parab
fonte

Questo è il modo più moderno (html5) per raggiungere questo requisito, tieni presente che richiede un pulsante type = submit. Un pulsante type = con un gestore di invio onclick non richiede automaticamente all'utente di effettuare una selezione.

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

In questo caso puoi evitare la convalida personalizzata.

— Fawaz
fonte

2

Solo una piccola osservazione:

alcuni browser Safari non sembrano rispettare né l'attributo "nascosto" né l'impostazione di stile "display: none" (testato con Safari 12.1 in MacOS 10.12.6). Senza un testo segnaposto esplicito, questi browser mostrano semplicemente una prima riga vuota nell'elenco di opzioni. Può quindi essere utile fornire sempre del testo esplicativo per questa voce "fittizia":

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

Grazie all'attributo "disabilitato", non verrà comunque selezionato attivamente.

— Andreas Rozek
fonte

1

Capisco cosa stai cercando di fare. Il modo migliore e di maggior successo è:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

— Guryash Singh
fonte

1

L'ho trovato davvero interessante perché ho sperimentato la stessa cosa non molto tempo fa. Tuttavia, mi sono imbattuto in un esempio su Internet sulla soluzione al riguardo.

Senza ulteriori indugi, vedere il frammento di codice di seguito:

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

Con ciò, rimarrà inammissibile ma selezionabile, in qualsiasi momento. Più praticità per l'interfaccia utente e ottima per l'esperienza utente.

Bene, tutto qui, spero che sia d'aiuto. Saluti!

— farisfath25
fonte

Renderlo incapace di inviare ma anche attirare l'attenzione dell'utente sul menu a discesa sembra ridondante, ma mi piace il suggerimento

— Iofacture

@lofacture: grazie per l'input. in realtà, il codice che ho scritto era quello che stavo desiderando, ma sì, come hai detto, dipende dalle esigenze dell'utente / proprietario

— farisfath25

0

Non esiste una soluzione HTML. Secondo le specifiche HTML 4.01, il comportamento del browser non è definito se nessuno degli optionelementi ha l' selectedattributo e ciò che i browser fanno in pratica è che rendono la prima opzione preselezionata.

Per ovviare al problema, è possibile sostituire l' selectelemento con un insieme di input type=radioelementi (con lo stesso nameattributo). Questo crea un controllo dello stesso tipo anche se con aspetto e interfaccia utente diversi. Se nessuno degli input type=radioelementi ha l' checkedattributo, nessuno di essi è inizialmente selezionato nella maggior parte dei browser moderni.

— Jukka K. Korpela
fonte

0

Sto usando Laravel 5 framework e la risposta di @Gambi ha funzionato anche per me, ma con alcune modifiche al mio progetto.

Ho i valori delle opzioni in una tabella del database e li uso con un'istruzione foreach. Ma prima della dichiarazione ho aggiunto un'opzione con le impostazioni suggerite da @Gambit e ha funzionato.

Ecco il mio esempio:

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

Spero che questo aiuti anche qualcuno. Continua così!

— LOG Oracle
fonte

0

Prova questo:

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

La prima opzione nel menu a discesa sarebbe vuota.

— Abhijit pai
fonte

0

Per mostrare , seleziona un valore nel menu a discesa e nasconderlo dopo aver . si prega di utilizzare il seguente codice.

supporterà anche la convalida richiesta.

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

Espandi frammento

— Bathri Nathan
fonte

0

Se si utilizza Angular (2+), (o qualsiasi altro framework), è possibile aggiungere un po 'di logica. La logica sarebbe: visualizzare un'opzione vuota solo se l'utente non ha ancora selezionato nessun altro. Quindi, dopo che l'utente ha selezionato un'opzione, l'opzione vuota scompare.

Per Angular (9) questo sarebbe simile a questo:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

— Mike de Klerk
fonte

-2

Prova questo:

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

Convalida in HTML5. Funziona con l' requiredattributo nell'elemento select. Può essere nuovamente selezionato. Funziona con Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

— Tristan Bailey
fonte

opzione di selezione predefinita come vuota

Oggi (25-02-2015)

In precedenza (2013-08-02)

Futuro

File di prova