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

angel_dope · #1 (**permalink**) 07/07/2016, 05:02

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<head>
 <script>
        function validar_peligro()
        {
            var selectChoose = document.getElementById('peligro_secundario');
            var maxOptions = 3;
            var optionCount = 0;
            for (var i = 0; i < selectChoose.length; i++) {
                if (selectChoose[i].selected) {
                    optionCount++;
                    if (optionCount > maxOptions) {
                        alert("Solo puede seleccionar tres opciones o menos. Por favor, elimine las selecciones sobrantes.")
                    return false;
                    }
                }
            }
        }
        </script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="validar_peligro()">
 
<select name="peligro_secundario" size="5" multiple="multiple"  id="peligro_secundario"  onchange="validate()">
     <option value="" selected="selected">No aplica</option>     
     <option value="1">1</option>    
     <option value="2">3</option>    
     <option value="3">4.1</option>  
     <option value="4">4.2</option>  
     <option value="5">4.3</option>  
     <option value="6">5.1</option>  
     <option value="7">5.2</option>  
     <option value="8">6.1</option>  
     <option value="9">6.2</option>  
     <option value="10">8</option>   
     <option value="11">9</option>   
      </select>
 
--- varios campos más---
</form>
</body>

angel_dope · #2 (**permalink**) 07/07/2016, 05:21

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<script language="javascript">
function validar(form1) {
var ret;
var selectChoose = document.getElementById('peligro_secundario');
var maxOptions = 3;
var optionCount = 0;
for (var i = 0; i < selectChoose.length; i++) {
    if (selectChoose[i].selected) {
        optionCount++;
        if (optionCount > maxOptions) {
            alert("Solo puede seleccionar tres opciones o menos. Por favor, elimine las selecciones sobrantes.")
            ret = false;
        }
    }
}
      
if (form1.codigo.value == "" || form1.producto.value == "" || form1.numero_version.value == "" || form1.fecha_version.value == "" || form1.fecha_emision.value == "") {
    alert('Por favor, rellene todos los campos');
    ret = false;
}
if (form1.aplica.value == "") {
    alert('Por favor, seleccione si aplica o no la información de transporte');
    ret = false;
}
if (form1.aplica.value == "1" && (form1.onu.value == "" || form1.peligro_principal.value == "" || form1.peligro_secundario.value == "" || form1.grupo_embalaje.value == "")) {
    alert('Por favor, si aplica la información de producto, complete todos los campos de este apartado');
    ret = false;
}
return ret;
}
</script>