1

Tengo un código en el que me clona la primer fila de una tabla, tengo dos selectuno dependiente del otro, es decir dependiendo de lo que yo seleccione en el primer select(TIPO_ACTIVIDAD), me listara unas opciones en el segundo(SUBTIPO), el clona bien, aunque no copia los select, y las opciones se despliegan bien, solo si es la primer fila, y es ese el problema, cuando clono una fila, y voy a seleccionar una de las opciones del primer select bien. pero cuando voy seleccionar la del segundo me llama las opciones del select de la fila superior, no se que hacer pues se que si clona la fila clona, estos son los códigos:

JS

Código para clonar primera fila

<script>

$(function(){
// Clona la fila oculta que tiene los campos base, y la agrega al final de 
la tabla
      $("#adicional").on('click', function(){
      $("#tabla tbody 
      tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");
});
// Evento que selecciona la fila y la elimina 
$(document).on("click",".eliminar",function(){
   var parent = $(this).parents().get(0);
   $(parent).remove();
    });
});

</script>

Código para mostrar Selects dependientes

<script type="text/javascript">
  function cargarSUBTIPO(valor) {
   var arrayValores=new Array( 
     new Array("Arreglos","Arreglo Bidireccional","Arreglo Bidireccional"), 
     new Array("Arreglos","Arreglo Pymes","Arreglo Pymes"),
     new Array("Arreglos","VT Mejoramiento Servicio","VT Mejoramiento 
     Servicio"),
     new Array("Desconexiones","Desconexion Carta","Desconexion Carta"),
     new Array("Desconexiones","Desconexion x ","Desconexion x") 

   );

  if(valor==0) {

         .getElementById("SUBTIPO").disabled=true; 

  }else{

     document.getElementById("SUBTIPO").options.length=0; 
     document.getElementById("SUBTIPO").options[0]=new 
     Option("Seleccione...", "Seleccione...");

     for(i=0;i<arrayValores.length;i++) {

       if(arrayValores[i][0]==valor) {       
          document.getElementById("SUBTIPO").options
          [document.getElementById("SUBTIPO").options.length]
          =new Option(arrayValores[i][2], arrayValores[i][1]); 
       } 
     }

    document.getElementById("SUBTIPO").disabled=false;

   } 
} 

function seleccionado_SUBTIPO(value) {
  var v1 = document.getElementById("TIPO_ACTIVIDAD"); 
  var valor1 = v1.options[v1.selectedIndex].value; 
  var text1 = v1.options[v1.selectedIndex].text; 
  var v2 = document.getElementById("SUBTIPO"); 
  var valor2 = v2.options[v2.selectedIndex].value; 
  var text2 = v2.options[v2.selectedIndex].text;
}
</script>

HTML

<td>
  <select name="TIPO_ACTIVIDAD[]" id="TIPO_ACTIVIDAD" 
    onchange='cargarSUBTIPO(this.value);'>
  <option value="">Selecciones...</option>
  <option value="Arreglos">Arreglos</option>
  <option value="Desconexiones">Desconexiones</option>
  </select>
</td>

1 respuesta 1

1
  1. Eso es por que no puedes seleccionar tus select por el id, si el id se repite el sistema siempre va a coger el primero que encuentre, además en las buenas prácticas del html si vas a tener varios elementos con el mismo nombre es mejor usar una class ya que un id debe ser un identificador único he irrepetible.

  2. Para que te funcione correctamente debes seleccionar es el select con el cual se está haciendo la interacción del usuario, eso lo logras con el this, cuando haces onchange='cargarSUBTIPO(this.value); no envíes this.value envía únicamente this es decir todo el elemento como tal, luego recorres los nodos hasta llegar al siguiente select perteneciente a la fila actual

EJEMPLO

function cargarSUBTIPO(elemento) {
    var valor = elemento.value;

    var arrayValores=new Array( 
    new Array("Arreglos","Arreglo Bidireccional","Arreglo Bidireccional"), 
 new Array("Arreglos","Arreglo Pymes","Arreglo Pymes"),
 new Array("Arreglos","VT Mejoramiento Servicio","VT Mejoramiento 
 Servicio"),
 new Array("Desconexiones","Desconexion Carta","Desconexion Carta"),
 new Array("Desconexiones","Desconexion x ","Desconexion x") 
    ); 

    var select_subtipo = elemento.parentElement.parentElement.children[5].children[0];

    if(valor==0) { 
    // desactivamos el segundo select 
    select_subtipo.disabled=true; 
    }else{ 
    // eliminamos todos los posibles valores que contenga el SUBTIPO 
    select_subtipo.options.length=0; 
    // añadimos los nuevos valores al SUBTIPO 
    select_subtipo.options[0]=new Option("Seleccione...", "Seleccione..."); 

    for(i=0;i<arrayValores.length;i++) { 
    //unicamente añadimos las opciones que pertenecen al id seleccionado del primer select 
    if(arrayValores[i][0]==valor) { 
    select_subtipo.options[select_subtipo.options.length]=new Option(arrayValores[i][2], arrayValores[i][1]); 
    } 
    } 
    //habilitamos el segundo select 
    select_subtipo.disabled=false; 
    } 
} 

Espero que te sirva, saludos !

11
  • Hola Camilo Vazquez, realice lo que dijiste pero persiste el error, lo coloque asi: onchange='cargarSUBTIPO(this);
    – Anderviver
    Commented el 6 oct. 2017 a las 17:23
  • Tienes que cambiar tu código, la forma en que recibes el parámetro en la función, recuerda que ya no estás recibiendo un valor si no todo el elemento Commented el 6 oct. 2017 a las 17:24
  • Te agradecería si me pudieras dar una idea de como tendría que quedar en código, la verdad no se mucho de js
    – Anderviver
    Commented el 6 oct. 2017 a las 19:21
  • Te voy a editar la funcion del onchange en la respuesta para que veas ! Commented el 6 oct. 2017 a las 19:24
  • Ya te la edité, prueba así, te debería de funcionar Commented el 6 oct. 2017 a las 19:26

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.