Vale esto es similar a lo que vimos hace un rato en este blog solo que en esa ocasion era de 1 a 1. Ahora haremos eso mismo pero de N a N, este ejemplo puede ser fácilmente aplicado a diferentes elementos, no solo a selects y desde ya vas avisado de que no es un código pulido, solo es un ejemplo.
La idea es la siguiente, tenemos N cantidad de input que podemos cambiar a la hora que se nos antoje y cuando uno de ellos cambie, hará lo mismo en un elemento adjunto y en este caso será un select tal como se aprecia en la siguiente imagen.
Yo pondre el codigo HTML que se genero mediante PHP y un for, pero es basicamente lo mismo indiferente del lenguaje que este utilizando.
Me he apoyado de las etiquetas data para poder hacer dichas acciones. Prácticamente las etiquetas datas guardaran el número de iteraciones para luego poder buscar cualquier cosa dentro de la página, ya que cada elemento contendrá un ID para identificarlos, sería algo como "nombre+numero_iteracion". Dentro de cada elemento de tipo input le diremos que haremos uso del atributo onkeyup el cual al utilizarlo este espera que le indiquemos que funcion llevara a cabo y dentro de esta funcion le enviamos el elemento actual (this).Dicho lo siguiente vamos a ver el código HTML
Se que esta largo el codigo, pero como repito, se hizo con un FOR y para que se viera adecuadamente se coloco todo el HTML resultante. Ahora el codigo javascript
La explicación es simple, cada que una tecla se levanta esta acción se dirige a la función que maneja el evento, obtiene el contenido que el input contiene y a partir de ahi crea el nombre del ID del select para luego asignar el valor según lo que contiene el input.
Bueno eso es todo, espero les sea util a mas de alguno.
La idea es la siguiente, tenemos N cantidad de input que podemos cambiar a la hora que se nos antoje y cuando uno de ellos cambie, hará lo mismo en un elemento adjunto y en este caso será un select tal como se aprecia en la siguiente imagen.
Yo pondre el codigo HTML que se genero mediante PHP y un for, pero es basicamente lo mismo indiferente del lenguaje que este utilizando.
Me he apoyado de las etiquetas data para poder hacer dichas acciones. Prácticamente las etiquetas datas guardaran el número de iteraciones para luego poder buscar cualquier cosa dentro de la página, ya que cada elemento contendrá un ID para identificarlos, sería algo como "nombre+numero_iteracion". Dentro de cada elemento de tipo input le diremos que haremos uso del atributo onkeyup el cual al utilizarlo este espera que le indiquemos que funcion llevara a cabo y dentro de esta funcion le enviamos el elemento actual (this).Dicho lo siguiente vamos a ver el código HTML
Se que esta largo el codigo, pero como repito, se hizo con un FOR y para que se viera adecuadamente se coloco todo el HTML resultante. Ahora el codigo javascript
La explicación es simple, cada que una tecla se levanta esta acción se dirige a la función que maneja el evento, obtiene el contenido que el input contiene y a partir de ahi crea el nombre del ID del select para luego asignar el valor según lo que contiene el input.
Bueno eso es todo, espero les sea util a mas de alguno.