<SELECCIONAR múltiple>: ¿cómo permitir solo un elemento seleccionado?

134

Tengo un <SELECT multiple>campo con varias opciones y quiero permitir que solo se seleccione una opción al mismo tiempo, pero el usuario puede mantener presionada la tecla CTRL y seleccionar más elementos a la vez.

¿Hay alguna forma de hacerlo? (No quiero eliminar 'múltiples').

html html-select

— simPod
fuente

55

¿Qué? ¿Por qué? Esto necesita más explicaciones.

— Dai

55

¿Al no usar múltiples con su selección? :)

— GordonM

55

@GordonM, sí, totalmente: PI estaba buscando lo mismo hoy porque quería que se mostraran varios elementos (lo que está implícito en el multipleatributo) sin poder seleccionar múltiples. Olvidé que se llamaba al atributo para hacer esto size, por lo que la respuesta principal me sirvió bien :)

— Luc

Personalmente, tengo un campo múltiple seleccionado donde tengo cuatro opciones y quiero que se puedan seleccionar tres de las opciones, pero la cuarta debe estar sola si se selecciona porque chocaría con las otras tres (3 opciones y un "ninguno ")

— RWolfe

281

Simplemente no lo convierta en un múltiplo seleccionado, sino que establezca un tamaño, como:

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

Ejemplo de trabajo: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
fuente

¿Es posible contar mediante programación el número total de <opción> en el atributo de tamaño?

— MyName

@Natasha Puede obtener el valor del campo de tamaño usando jquery :-)

— Vladimir verleg

Información relevante sobre el tamaño: colocar el selectinterior de un display: flexcontenedor y hacer flex-grow: 1sobre él selecthará que se trate size="3"como una altura mínima, y luego ajuste la altura de la selección completa al tamaño máximo posible dentro de su contenedor. jsfiddle.net/z1gypahs

— Torxed

25

Si el usuario debe seleccionar solo una opción a la vez, simplemente elimine el "múltiple" - haga una selección normal:

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

Violín

— MacGucky
fuente

9

¿Por qué no quieres eliminar el multipleatributo? El propósito completo de ese atributo es especificar al navegador que se pueden seleccionar múltiples valores del selectelemento dado . Si solo se debe seleccionar un único valor, elimine el atributo y el navegador sabrá que solo permite una única selección.

Usa las herramientas que tienes, para eso están.

— David
fuente

1

ah el atributo de tamaño funciona también de forma independiente. No me di cuenta. gracias

— simPod

66

@simPod el razonamiento es porque hay momentos en que los clientes necesitan ver todas las opciones frente a ellos, pero solo pueden elegir 1 de ellas. Ha pasado tanto tiempo desde que escribí html "real", que tuve que buscar en google / bing la respuesta ... Oh, gracias al cielo por StackOverflow algunos días.

— Richard B

1

Solo desea una opción por defecto, pero el usuario puede seleccionar varias opciones presionando la tecla CTRL. Así es (ya) exactamente cómo debe comportarse el múltiplo SELECT.

Vea esto: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

¿Puedes por favor aclarar tu pregunta?

— Cogicero
fuente

Awww, ahora entiendo la pregunta, gracias a Marcos Placona. La pregunta inicial no estaba bien redactada.

— Cogicero

Aunque personalmente creo que es "injusto" para la experiencia del usuario cuando muestra múltiples opciones de selección, pero el usuario solo puede seleccionar una.

— Cogicero

1

depende de la situación

— simPod

1

Vengo aquí después de buscar en google y cambiar algo al final.

Así que solo cambio esta muestra y funcionará con jquery en tiempo de ejecución.

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

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

— Ajay2707
fuente

44

Básicamente estás haciendo lo que está haciendo la respuesta aceptada, pero de una manera enrevesada. En lugar de eliminar el atributo múltiple en tiempo de ejecución, puede eliminarlo directamente en el 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>

Esta solución simple permite obtener visualmente una lista de opciones, pero poder seleccionar solo una.

— Ste
fuente

44

Bienvenido a SO. Agregue una descripción detallada

— Andriy Ivaneyko

1

Tuve algunos tratos con select \ multi-select, esto es lo que me sirvió.

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

— Ewan
fuente

0

Tarde para responder pero podría ayudar a alguien más, aquí es cómo hacerlo sin eliminar el atributo 'múltiple'.

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

— DotNetFullStack
fuente

Nota: Esto requiere el complemento jQuery Chosen: harvesthq.github.io/chosen

— smolo