<SELEZIONA multiplo>: come consentire solo un elemento selezionato?

134

Ho un <SELECT multiple>campo con più opzioni e voglio permettergli di avere una sola opzione selezionata contemporaneamente ma l'utente può tenere premuto il tasto CTRL e selezionare più elementi contemporaneamente.

C'è un modo per farlo? (Non voglio rimuovere "multipli").

html html-select

— simPod
fonte

5

Che cosa? Perché? Questo ha bisogno di più spiegazioni.

— Dai

5

Non usando multipli con la tua selezione? :)

— GordonM,

5

@GordonM sì, assolutamente: PI stava cercando lo stesso oggi perché volevo mostrare più elementi (il che è implicito con l' multipleattributo) senza essere in grado di selezionarne più. Ho dimenticato che l'attributo per fare questo è stato chiamato size, quindi la risposta migliore mi ha servito bene :)

— Luc

Personalmente ho selezionato un campo multiplo in cui ho quattro opzioni e voglio che tre delle opzioni possano essere selezionate, ma la quarta deve essere sola se selezionata perché si scontrerebbe con le altre tre (3 opzioni e una "nessuna ")

— RWolfe,

281

Basta non renderlo un multiplo selezionato, ma impostarne una dimensione, ad esempio:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Esempio di lavoro: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
fonte

È possibile contare programmaticamente il numero totale di <opzione> nell'attributo size?

— MyName

@Natasha Puoi ottenere il valore del campo della dimensione usando jquery :-)

— Vladimir verleg

Informazioni rilevanti sulla dimensione: posizionando l' selectinterno di un display: flexcontenitore, e fare ciò flex-grow: 1, lo selectfarà trattare size="3"come un'altezza minima, quindi agganciare l'altezza dell'intera selezione alla dimensione massima possibile all'interno del contenitore. jsfiddle.net/z1gypahs

— Torxed

25

Se l'utente deve selezionare solo un'opzione alla volta, basta rimuovere il "multiplo" - effettuare una selezione normale:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

Violino

— MacGucky
fonte

9

Perché non vuoi rimuovere l' multipleattributo? Lo scopo di tale attributo è quello di specificare al browser che è possibile selezionare più valori dall'elemento specificato select. Se è necessario selezionare un solo valore, rimuovere l'attributo e il browser saprà consentire una sola selezione.

Usa gli strumenti che hai, ecco a cosa servono.

— David
fonte

1

ah. l'attributo size funziona anche da solo. non notato. grazie

— simPod

6

@simPod il ragionamento è perché ci sono momenti in cui i clienti devono vedere tutte le opzioni davanti a loro, ma possono sceglierne solo 1. È passato così tanto tempo da quando ho scritto HTML "reale", che ho dovuto cercare su Google / bing la risposta ... Oh, grazie al cielo per StackOverflow alcuni giorni.

— Richard B,

1

Si desidera solo un'opzione per impostazione predefinita, ma l'utente può selezionare più opzioni premendo il tasto CTRL. Questo è (già) esattamente il comportamento del multiplo SELECT.

Vedi questo: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Puoi chiarire la tua domanda per favore?

— Cogicero
fonte

Awww capisco la domanda ora, grazie a Marcos Placona. La domanda iniziale non era ben formulata.

— Cogicero,

Anche se personalmente ritengo che sia "ingiusto" l'esperienza dell'utente quando mostri più opzioni di selezione, ma l'utente può selezionarne solo una.

— Cogicero,

1

dipende dalla situazione

— simPod

1

Vengo qui dopo aver cercato su Google e cambiare le cose alla mia estremità.

Quindi cambio solo questo esempio e funzionerà con jquery in fase di esecuzione.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

— Ajay2707
fonte

4

In pratica stai facendo quello che sta facendo la risposta accettata, ma in modo contorto. Invece di rimuovere l'attributo multiplo in fase di runtime, puoi semplicemente rimuoverlo direttamente nell'HTML. jsfiddle.net/3rkk6m9a

— Harry

1

<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

Questa semplice soluzione consente di ottenere visivamente un elenco di opzioni, ma di poterne selezionare solo una.

— ste
fonte

4

Benvenuti in SO. Per favore, aggiungi una descrizione dettagliata

— Andriy Ivaneyko,

1

Ho avuto dei rapporti con il select \ multi-select, questo è ciò che mi ha aiutato

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

— Ewan
fonte

0

In ritardo per rispondere, ma potrebbe aiutare qualcun altro, ecco come farlo senza rimuovere l'attributo "multiplo".

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

— DotNetFullStack
fonte

Nota: questo richiede il plugin jQuery Chosen: harvesthq.github.io/chosen

— smolo