Modificar un select individual (perteneciente a un array)

[WebDeveloperZ]

Que tal gente, tengo un array de selects porque el usuario llena una especie de grilla.

Con array me refiero a los clásicos: <input name="itemAncho[]">

En mi caso dependiendo del valor seleccionado de un select el otro va tomar x valor.

El problema que tengo es que no se como obtener el identificador (puede ser el orden) de el elemento seleccionado para luego modificar solo el otro select correspondiente y no todos los selects q pertenecen al array.

ej:

$(document).ready(function() {
$('[name="itemCalidad[]"]').change(function(){

obtener identificador del select itemCalidad seleccionado

var option = $('<option></option>').attr("value", "option value").text("Text");

modificar solo el select itemVidrio correspondiente al itemCalidad seleccionado (creria que mediante algun tipo de obtencion de orden de elemento)
$('[name="itemVidrio[]"]').empty().append(option);


});
});

Como lo hago ??? muchas gracias !

[marcelocuiza_de]

$("select").on("change",function(){
var sLabel = $(this).find("option:selected").text();
var sValue = $(this).find("option:selected").val();
alert(sValue +" - "+ sLabel);
});

[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

[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.

[Alexis88]

En ese caso, hazlo así:

Código Javascript:

$(document).on("change", "[name^=foo]", function(){
    //Las mismas instrucciones
});
 

De esta forma, cuando en el documento (que nunca cambiará) se produzca el evento change, aplicas a los elementos cuyos nombres empiecen por 'foo', las instrucciones que te expliqué en mi respuesta anterior. Esto está estrechamente ligado al concepto de programación orientada a eventos.

Saludos

[WebDeveloperZ]

Muchas gracias !!!!!!!