Clone dependent selects

Question

Clone dependent selects

Navigation

#1 by (1 votes)

1

I have a code in which I clone the first row of a table, I have two select one dependent on the other, that is, depending on what I select in the first select ( TIPO_ACTIVIDAD ), I will list some options in the second ( SUBTIPO ), clones well, but does not copy the select , and the options are displayed well, only if it is the first row, and that is the problem, when clone a row, and I go to select one of the options of the first select well. but when I go to select the second one it calls me the options of the select of the top row, I do not know what to do because if I cloned the clone row, these are the codes:

JS

Code to clone first row

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

Code to show Dependent Selects

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

javascript jquery html

asked by Anderviver 06.10.2017 в 18:31

source

1 answer

Autoload and Namespaces in PHP how is a data in java valid?

score 1 · Accepted Answer

That's because you can not select your select for the id , if the id repeats the system will always take the first one you find, in addition to the good practices of html if you are going to have several elements with the same name it is better to use a class since a id must be a unique identifier and unrepeatable.

To work properly you must select the select with which the user interaction is being done, that you achieve with this , when you do onchange='cargarSUBTIPO(this.value); do not send this.value send only this is to say the whole element as such, then you go through the nodes until you reach the next select belonging to the current row

EXAMPLE

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; 
    } 
}

I hope you serve, greetings!