Ver Mensaje Individual
  #3 (permalink)  
Antiguo 05/11/2014, 12:26
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Modificar un select individual (perteneciente a un array)

Podrías hacerlo así:

Código HTML:
Ver original
  1. <select name = "foo[]">
  2.     <option value = "foo 1">Foo 1</option>
  3.     <option value = "foo 2">Foo 2</option>
  4.     <option value = "foo 3">Foo 3</option>
  5.  
  6. <select name = "foo[]">
  7.     <option value = "foo 4">Foo 4</option>
  8.     <option value = "foo 5">Foo 5</option>
  9.     <option value = "foo 6">Foo 6</option>
  10.  
  11. <select name = "foo[]">
  12.     <option value = "foo 7">Foo 7</option>
  13.     <option value = "foo 8">Foo 8</option>
  14.     <option value = "foo 9">Foo 9</option>
  15.  
  16. <select name = "bar[]">
  17.     <option value = "bar 1">Bar 1</option>
  18.     <option value = "bar 2">Bar 2</option>
  19.     <option value = "bar 3">Bar 3</option>
  20.  
  21. <select name = "bar[]">
  22.     <option value = "bar 4">Bar 4</option>
  23.     <option value = "bar 5">Bar 5</option>
  24.     <option value = "bar 6">Bar 6</option>
  25.  
  26. <select name = "bar[]">
  27.     <option value = "bar 7">Bar 7</option>
  28.     <option value = "bar 8">Bar 8</option>
  29.     <option value = "bar 9">Bar 9</option>

Código Javascript:
Ver original
  1. var valor, texto, idx, equiv;
  2. $("[name^=foo]").on("change", function(){
  3.     valor = this.value; //El valor seleccionado
  4.     idx = this.selectedIndex; //El número de opción seleccionada
  5.     texto = this.options[idx].innerHTML; //El texto de la opción seleccionada
  6.     equiv = $("[name^=foo]").index(this); //El número de lista en la que se produjo el cambio
  7.     $("[name^=bar]")
  8.           .eq(equiv) //Busco a la lista equivalente
  9.           .find("option") //Tomo a sus opciones
  10.           .eq(idx) //Tomo a la opción equivalente
  11.           .val(valor) //Le asigno el valor
  12.           .text(texto) //Le asigno el texto
  13.           .prop("selected", true); //La dejo seleccionada
  14. });

Ahora, la explicación. Tenemos dos grupos de arrays de listas de tres listas cada una (pueden ser más o menos). En el código JS, declaro tres variables que usaré más adelante (las declaro al inicio para no tener que hacerlo en cada ocasión en la que seleccione una opción). Luego, cuando elija un valor de cualquiera de las listas cuyo nombre empiece por 'foo', ejecuto una función. En dicha función, tomo al valor seleccionado, al número de opción seleccionada (si son tres y selecciono a la segunda, el valor será 1, recordando siempre que se empieza a contar desde 0), el texto de la opción seleccionada y el número de lista con la que estamos trabajando actualmente (el mismo caso que el de las opciones). Luego, del conjunto de listas cuyo nombre empiece por 'bar', tomo a la equivalente con la lista actual, busco a sus opciones, tomo a la opción equivalente con la opción seleccionada en la primera lista y le asigno el valor y texto de la misma, además, la selecciono, quedan visible.

DEMO

Podrías hacerlo en más o menos pasos, pero decidí mostrarlo de esta manera para que se pueda entender con facilidad. Si tienes dudas, pregunta.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand