1

Tengo un problema, es que cree un select con varias options, y quiero modificar el size de ellos cuando de click, pero en las varias formas que e intentado siempre me deja modificar o el primero o el último, pero no me toma más elementos.

// Creamos un array vacio para almacenar las iteracines
var selectores = new Array();
// Creamos un array vacio para almacenar a quien le doy click
var ElementosClick = new Array();
// Seleccionamos todos los tag select
var selector = document.getElementsByTagName('select');
// Capturamos el click y lo pasamos a una funcion
document.onclick = capturaClick;
// Iteramos y almacenamos las posiciones de los select
var i;
for (i = 0; i < selector.length; i++) {
    selectores[i] = onclick(selector);
    selectores.push(i);
    console.log(i);
}

console.log("Selectores: " + selectores)

function capturaClick(e) {
    // Funcion para capturar el click del raton
    var Click;
    if (e == null) {
        // Si hace click en un elemento, lo leemos
        Click = event.srcElement.tagName + asd;
        selector[i].addEventListener("click", cambioSize)
    } else {
        // Si ha hecho click sobre un destino, lo leemos
        Click = e.target.tagName + asd;
        selector[i].addEventListener("click", cambioSize)
    }
    // Añadimos el elemento al array de elementos
    ElementosClick.push(Click);
    // Una prueba con salida en consola
    console.log("Contenido sobre lo que ha hecho click: " + Click);
}

function cambioSize() {
    selector[i].size = "5";
}
<select>
<option value="0">--Seleccionador--</option>
<option value="1">-- Uno --</option>
<option value="2">-- Dos --</option>
</select>

1 respuesta 1

1

Me parece que te estas complicando mucho. Para "capturar" el evento clic usa addEventListener usando como primer argumento 'click' y como segundo argumento la función que quieres que se ejecute cuando ocurra el evento.

El siguiente ejemplo es muy simple. Se incluye un select al cual le agregamos un "listener" usando addEventListener según se mencionó arriba el cual registra en la consola un mensaje indicando el índice del la opción seleccionada cuando ocurrió el click.

(function(){
  document.querySelector('select').addEventListener('click',function(e){
    var index = e.target.selectedIndex;
    console.info('El índice de la opción seleccionada es %s',index)
  });
})()
<select>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Nótese que se usa querySelector en lugar de getElementsByTagName. La razón de esto en este ejemplo además de una preferencia personal, es que querySelector devuelve el primer elemento que satisface la condición mientras que getElementsByTagName devuelve una colección de elementos.

Algunas alternativas para devolver un elemento en lugar de una colección son usar getElementById(id), getElementsByTagName(tagName)[0] entre otras.

Por otro lado, en tu código estás declarando variables globales lo cual no es del todo recomendable, particularmente si no tienes claro como manejar este ámbito y el ámbito local.

El siguiente ejemplo es un poco más completo, se incluye una sentencia switch para asignar el width según tres casos: indice 0, indice 3 y los demás. Si en verdad quieres usar el size que es para controlar el tamaño vertical del select, puedes modificarlo fácilmente en tu implementación.

(function(){
  document.querySelector('select').addEventListener('click',function(e){
    var index = e.target.selectedIndex;
    switch(index){
      case 0:
        e.target.style.width = "160px";
        break;
      case 3: 
        e.target.style.width = "55px";
        break;
      default:
        e.target.style.width = "50px";  
    }
    console.info('El índice de la opción seleccionada es %s',index)
  });
})()
<select width="160px">
  <option value="">Seleccione una opción</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

2
  • Hola ruben, muchas gracias, la implementación de ese código es excelente, me sirvió muchisimo, realmente el código es muy óptimo.
    – Brayan
    Commented el 8 jul. 2019 a las 20:14
  • @brayan141 Gracias por tus amables palabras. Por favor, acepta la respuesta. ref. ¿Qué debo hacer cuando alguien contesta mi pregunta?
    – Rubén
    Commented el 8 jul. 2019 a las 20:53

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.