Modificar un select individual (perteneciente a un array)

[WebDeveloperZ]

Iniciado por Alexis88

Podrías hacerlo así:

Código HTML:

<select name = "foo[]">
    <option value = "foo 1">Foo 1</option>
    <option value = "foo 2">Foo 2</option>
    <option value = "foo 3">Foo 3</option>
</select>
  
<select name = "foo[]">
    <option value = "foo 4">Foo 4</option>
    <option value = "foo 5">Foo 5</option>
    <option value = "foo 6">Foo 6</option>
</select>
  
<select name = "foo[]">
    <option value = "foo 7">Foo 7</option>
    <option value = "foo 8">Foo 8</option>
    <option value = "foo 9">Foo 9</option>
</select>
  
<select name = "bar[]">
    <option value = "bar 1">Bar 1</option>
    <option value = "bar 2">Bar 2</option>
    <option value = "bar 3">Bar 3</option>
</select>
  
<select name = "bar[]">
    <option value = "bar 4">Bar 4</option>
    <option value = "bar 5">Bar 5</option>
    <option value = "bar 6">Bar 6</option>
</select>
  
<select name = "bar[]">
    <option value = "bar 7">Bar 7</option>
    <option value = "bar 8">Bar 8</option>
    <option value = "bar 9">Bar 9</option>
</select>
 

Código Javascript:

var valor, texto, idx, equiv;
$("[name^=foo]").on("change", function(){
    valor = this.value; //El valor seleccionado 
    idx = this.selectedIndex; //El número de opción seleccionada
    texto = this.options[idx].innerHTML; //El texto de la opción seleccionada
    equiv = $("[name^=foo]").index(this); //El número de lista en la que se produjo el cambio
    $("[name^=bar]")
          .eq(equiv) //Busco a la lista equivalente
          .find("option") //Tomo a sus opciones
          .eq(idx) //Tomo a la opción equivalente
          .val(valor) //Le asigno el valor
          .text(texto) //Le asigno el texto
          .prop("selected", true); //La dejo seleccionada
});
 

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

Muchas gracias Alexis, la solución es genial y esta súper clara.

Ahora, la única pregunta que me queda es como hago para que funcione cuando mediante jquery se pueden agregar nuevas filas (en tu ejemplo, nuevos selects) de forma dinámica.

Es decir, cuando el usuario ve la pantalla, solo encuentra una fila (con el select que de cambiar puede generar cambios), pero puede ir agregando otras mediante un botón. El problema es que la función no funciona con estas nuevas filas adheridas dinamicamente por mas que tenga el mismo identificador.

Muchas gracias.