Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Limitar el número de opciones en un select de elección multiple

Estas en el tema de Limitar el número de opciones en un select de elección multiple en el foro de Javascript en Foros del Web. Muy buenas, tengo un select en formato lista en el que los usuarios pueden seleccionar varios valores, y lo que quiero es que solo se ...
  #1 (permalink)  
Antiguo 07/07/2016, 05:02
Avatar de angel_dope  
Fecha de Ingreso: noviembre-2002
Ubicación: Valencia
Mensajes: 737
Antigüedad: 21 años, 4 meses
Puntos: 8
Pregunta Limitar el número de opciones en un select de elección multiple

Muy buenas, tengo un select en formato lista en el que los usuarios pueden seleccionar varios valores, y lo que quiero es que solo se puedan seleccionar tres opciones o menos.

Ya he conseguido que si seleccionan más de tres opciones salte un alert avisando de ello. Y en teoría he puesto que al enviar el formulario se vuelva a comprobar una vez más ese select, y que en caso de tener más de tres seleccionados, el formulario no se envíe, pero esto último no me lo hace. Si que me vuelve a sacar el alert, pero en lugar de hacer caso al return false; el formulario se envía de todas formas.

¿Qué tendría que cambiar para que una de dos, o haga caso y pare el envío del formulario, o cuando seleccione una cuarta opción, además de sacar el alert, anule esta última opción, dejando solo las tres primeras que se habían marcado?

Pongo todo el código tal cual lo tengo ahora:


Código Javascript:
Ver original
  1. <head>
  2.  <script>
  3.         function validar_peligro()
  4.         {
  5.             var selectChoose = document.getElementById('peligro_secundario');
  6.             var maxOptions = 3;
  7.             var optionCount = 0;
  8.             for (var i = 0; i < selectChoose.length; i++) {
  9.                 if (selectChoose[i].selected) {
  10.                     optionCount++;
  11.                     if (optionCount > maxOptions) {
  12.                         alert("Solo puede seleccionar tres opciones o menos. Por favor, elimine las selecciones sobrantes.")
  13.                     return false;
  14.                     }
  15.                 }
  16.             }
  17.         }
  18.         </script>
  19. </head>
  20.  
  21. <body>
  22. <form id="form1" name="form1" method="post" action="" onsubmit="validar_peligro()">
  23.  
  24. <select name="peligro_secundario" size="5" multiple="multiple"  id="peligro_secundario"  onchange="validate()">
  25.      <option value="" selected="selected">No aplica</option>     
  26.      <option value="1">1</option>    
  27.      <option value="2">3</option>    
  28.      <option value="3">4.1</option>  
  29.      <option value="4">4.2</option>  
  30.      <option value="5">4.3</option>  
  31.      <option value="6">5.1</option>  
  32.      <option value="7">5.2</option>  
  33.      <option value="8">6.1</option>  
  34.      <option value="9">6.2</option>  
  35.      <option value="10">8</option>   
  36.      <option value="11">9</option>   
  37.       </select>
  38.  
  39. --- varios campos más---
  40. </form>
  41. </body>
__________________
Vayamos por Partes :: Jack el Destripador
  #2 (permalink)  
Antiguo 07/07/2016, 05:21
Avatar de angel_dope  
Fecha de Ingreso: noviembre-2002
Ubicación: Valencia
Mensajes: 737
Antigüedad: 21 años, 4 meses
Puntos: 8
Respuesta: Limitar el número de opciones en un select de elección multiple

Bueno, ya lo tengo solucionado, al final adaptando el script a otro de control de formulario, y añadiendo de paso el resto de comprobaciones, ya funciona como toca:
Código Javascript:
Ver original
  1. <script language="javascript">
  2. function validar(form1) {
  3. var ret;
  4. var selectChoose = document.getElementById('peligro_secundario');
  5. var maxOptions = 3;
  6. var optionCount = 0;
  7. for (var i = 0; i < selectChoose.length; i++) {
  8.     if (selectChoose[i].selected) {
  9.         optionCount++;
  10.         if (optionCount > maxOptions) {
  11.             alert("Solo puede seleccionar tres opciones o menos. Por favor, elimine las selecciones sobrantes.")
  12.             ret = false;
  13.         }
  14.     }
  15. }
  16.      
  17. if (form1.codigo.value == "" || form1.producto.value == "" || form1.numero_version.value == "" || form1.fecha_version.value == "" || form1.fecha_emision.value == "") {
  18.     alert('Por favor, rellene todos los campos');
  19.     ret = false;
  20. }
  21. if (form1.aplica.value == "") {
  22.     alert('Por favor, seleccione si aplica o no la información de transporte');
  23.     ret = false;
  24. }
  25. if (form1.aplica.value == "1" && (form1.onu.value == "" || form1.peligro_principal.value == "" || form1.peligro_secundario.value == "" || form1.grupo_embalaje.value == "")) {
  26.     alert('Por favor, si aplica la información de producto, complete todos los campos de este apartado');
  27.     ret = false;
  28. }
  29. return ret;
  30. }
  31. </script>
__________________
Vayamos por Partes :: Jack el Destripador

Etiquetas: eleccion, maximo, múltiple, numero, opciones, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:10.