1

Tengo un problema al validar los indexes de las opciones seleccionadas en un select ya que el evento solo se ejecuta en el utlimo select, al ser el index seleccionado == 0 , es como si el for no funcionara

el boton se debe activar solo si ambos select estan en un index que no sea 0 pero al seleccionar index 0 en el select numero 1 e index 1 en el select 2 el boton sigue activo.

let btn = document.getElementById("btn");
let list = document.getElementsByClassName("options");
btn.disabled = true;

for (item of list){
  
  item.addEventListener('mouseout', function(){
    if(item.options.selectedIndex === 0){
        btn.disabled = true
    }else if (item.options.selectedIndex !== 0){
        btn.disabled = false
    
 } 
}, false)
}
<select class="options"name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="options"name="" id="">
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <button id="btn">Submit</button>

2
  • No interpreto bien que es lo que quieres hacer; que cuando en cualquiera de los 2 botones se seleccione el índice 0, el botón se active? o que en los 2 este seleccionado? Porfavor explícate mejor así es más fácil ayudarte! Saludos Commented el 5 may. 2018 a las 21:58
  • necesito que si alguna de las dos listas tiene seleccionado el index 0 el boton se desactive ambas tienen que tener un index diferente a 0 para que el boton se active
    – SERGIO
    Commented el 5 may. 2018 a las 22:02

2 respuestas 2

1

El problema esta en que al ejecutarse el evento mouseout del elemento select, solo esta evaluando un solo elemento a la vez, por lo tanto nunca verifica que los dos elementos tengan seleccionados indices diferente a 0.

Para esto debes recorrer todos los elementos y verificar que ningun elemento tenga seleccionado el indice 0 de la lista de opciones, aqui te muestro un ejemplo de como quedaria al validar todos los elementos:

Ojo: Estas utilizando sintaxis de Ecmascript 6, por lo tanto debes tener cuenta que en navegadores antiguos esta solución puede presentar inconvenientes.

let btn = document.getElementById("btn");
        let list = document.getElementsByClassName("options");
        btn.disabled = true;

        for (item of list) {
            item.addEventListener('mouseout', function () {
                let numberOfValidElements = 0;
                Array.from(list).forEach(element => {
                    if (element.options.selectedIndex !== 0) {
                        numberOfValidElements++;
                    }
                });

                btn.disabled = (numberOfValidElements === list.length ? false : true);
            });
        }
<select class="options" name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select class="options" name="" id="">
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <button id="btn">Submit</button>

1
  • muchas gracias justo lo que necesitaba, seria valido hacer un for dentro de otro en vez de un array from?
    – SERGIO
    Commented el 5 may. 2018 a las 23:52
1

Bueno segun lo que entendi te hice una demo.

En el html le asignas un id a cada select (diferente)

<select class="options"name="" id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="options"name="" id="select2">
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<button id="btn">Submit</button>

Después con javascript compruebas con el evento onchange si alguno de ellos ha cambiado.

let select1 = document.getElementById('select1');
let select2 = document.getElementById('select2');
let btn = document.getElementById('btn');

//Por defecto 
btn.disabled = true;

select1.addEventListener('change', () => {
        select1.selectedIndex != 0  && select2.selectedIndex != 0? btn.disabled= false: btn.disabled= true;
})

select2.addEventListener('change', () => {
        select1.selectedIndex != 0  && select2.selectedIndex != 0? btn.disabled= false: btn.disabled= true;
})

Espero que te haya ayudado!!!

1
  • gracias, tambien funciona , pero lo ideal es obtener los elementos por la clase asi evitando lineas extra para un codigo mas compacto
    – SERGIO
    Commented el 5 may. 2018 a las 23:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.