0

Tengo un formulario dinámico en el cual clono la 2 fila de mi tabla y en ella hay 2 select el cual uno depende del anterior y dependiendo de la opción que eligas seran las opciones que aparezcan en el otro.

PROBLEMA

cuando clono el select, el clon me sale con la opción del original y aunque seleccione otra opción del clon no me sale las opciones correspondientes y se quedan las del original. este es mi código:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bitácora de Inspección de PEF</title>

    <link rel="stylesheet" href="../../../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../../../css/sweetalert.css">
    <link rel="stylesheet" href="../css/estilosModulo_InspeccionPEF.css">
    <script type="text/javascript" src="../../../../js/Modulos.js"></script>

   <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(2)").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>

    <script>
       function solonumeros(e){
          key = e.keyCode || e.which;

          teclado=String.fromCharCode(key).toLowerCase();

          letras="1234567890";

          especiales="8-37-38-46-164";

          teclado_especial=false;

          for (var i in especiales) {
            if (key==especiales[i]){
              teclado_especial=true;break;
            }
          }//fin for

          if (letras.indexOf(teclado) == -1 && !teclado_especial){
            return false;
          }

        }
    </script>


  </head>
  <header>
    <img class="logo-katara" src="../../../../img/Logo-Katara.png">
    <h1 class="titulo-principal" align="center">Invernadero Katara</h1><br>
  </header>
  <hr>

  <body>

  <div class="container">
      <div class="row">
        <div class="col-md-12 col-xs-5 ">
<br>
  <form action="consulta_chofer.php">
    <input type="submit" class="btn btn-info margbtnconsulta" value="Consulta">
  </form>


    <form name= "formulario_modulo_bitacora_inspecionPEF" id="formulario_modulo_bitacora_inspecionPEF">
      <table class="table table-striped" width="50%" border="0px" align="center">
        <tr class=''>
        <td colspan='16' align='center'><h2>Bitácora de Inspección de Pozo Embalse y  Fertirriego</h2></td>

        </tr>

          <tr class= 'success'>
            <td colspan="5" align="center">REGISTRO SENASICA:  UP2019007507</td>
            <td colspan="10" align="center">CODIGO:BK-D01</td>

          </tr>
        </table>

        <div class="scroll">
        <table class="table table-striped margintabla"  border="0px" align="center" id="tabla"> 
        <tr  class="fila-fija"> 
         <tr class="">
          <td colspan="1">Modulos, Embalse, Fertirriego, Cisterna, Pozo, Afuera</td>
          <td colspan="1">Material Inspeccinado</td>
          <td colspan="1">Num. Material</td>
          <td>|</td>
          <td colspan="5">Eliminar fila</td>
        </tr>

        <td colspan="1"><select class="custom-select" name="MEFCPA[]" id="MEFCPA" size="1">
                  <option value="0">Elige una nave o Modulo</option>
                  <?php
                    while($filaNave = $datosNave->fetch_array(MYSQLI_BOTH)){
                      $idNave = $filaNave['idmodulos'];
                      $num_nave = $filaNave['num_modulo'];

                      echo'<option value="'.$idNave.'">'.$num_nave.'</option>';

                    }
                  ?>
                  <option value="embalse">Embalse</option>
                  <option value="fertirriego">Fertirriego</option>
                  <option value="cisterna">Cisterna</option>
                  <option value="pozo">Pozo</option>
                  <option value="afuera">Afuera</option>

        </select></td>

        <td colspan="1"><select class="custom-select" name="tipo[]" id="tipo" size="1">
          <option value="0">Elige un Material</option>
        </select></td>

        <td colspan="1"><input type="number"  class="form-control" name="numMaterial[]" id="numMaterial" step="any" min="1" required onkeypress="return solonumeros(event)"></td>

          <td><input type="hidden" class="form-control" name="fecha_registro[]"  value="<?php echo date("Y-m-d\TH-i");?>"></td>
          <td><input type="hidden" name="nombre_personal[]" id="nombre_personal" value="<?php echo $idpersonal; ?>" readonly></td>

          <td colspan="1" class="eliminar"><input type="button" class="btn btn-danger" value="Menos -"></td>
        </tr>

      </table>
      </div>
      <div class="row" id="load" hidden="hidden">
        <div class="col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5">
         <img src="../../../../img/load.gif" width="100%" alt="">
        </div>
        <div class="col-xs-12 center text-accent">
          <span>Validando información...</span>
        </div>
      </div>

      <center>
         <button type="button" class="btn btn-success" name="button" id="moduloCHF" align="center">Registrar</button>
         <button id="adicional" name="adicional" type="button" class="btn btn-info">Mas +</button>
      </center>  
    </form>
    <script src="../../../../js/jquery.js"></script>
    <script src="../../../../js/bootstrap.min.js"></script>
    <script src="../../../../js/sweetalert.min.js"></script>
    <script src="../js/appFuncion.js" charset="utf-8"></script>
    <script src="../js/operaciones.js"></script>
    </div></div></div>
  </body>
</html>

para hacer los select dinamicos traigo un documento llamado appFuncion.js

Javascript

$('#MEFCPA').click(function(){

    var opt_1 = new Array("Elige un Material", "Antena y Cables", "Drenado 30-D", "válv y solenoide", "Fugas");
    var opt_2 = new Array("Elige un Material", "Antena y Cables", "Drenado 30-D", "válv y solenoide", "Fugas");
    var opt_3 = new Array("Elige un Material", "Antena y Cables", "Drenado 30-D", "válv y solenoide", "Fugas");
    var opt_4 = new Array("Elige un Material", "Antena y Cables", "Drenado 30-D", "válv y solenoide", "Fugas");
    var opt_5 = new Array("Elige un Material", "Antena y Cables", "Drenado 30-D", "válv y solenoide", "Fugas");
    var opt_embalse = new Array("Elige un Material", "Limpieza 60-D", "Llenado 20-D", "Tuberías", "Malla perimetral", "Geomembrana", "Bombas");
    var opt_fertirriego = new Array("Elige un Material", "Bombas", "Flotador Automatico", "Consola Talgil", "Tuberías", "Filtros", "Venturis", "Agitadores", "Filtros Fertirrriego 2-D", "Filtros Princ 30-D", "Fusibles", "Tanques", "Limpieza");
    var opt_cisterna = new Array("Elige un Material", "Limpieza", "Fugas", "Tuberia");
    var opt_pozo = new Array("Elige un Material", "Tubería", "Bomba", "Limpieza", "Malla", "Maleza", "Fugas", "Transformador");
    var opt_afuera = new Array("Elige un Material", "Líneas de Servicio", "Líneas de Riego");


      var valorID;

      valorID = document.getElementById("MEFCPA").value;
      //se chequea si el "select primario" esta definido
      if (valorID != 0) {
        //seleccionamos la opcion correcta correctas
        mis_opts=eval("opt_"+valorID);
        //se calcula el numero de opciones
        num_opts = mis_opts.length;
        //marco el numero de opciones en el select
        document.getElementById("tipo").length = num_opts;
        // para cada opcion del array, la pongo en el select
        for (var i = 0; i < num_opts; i++) {
         document.getElementById("tipo").options[i].value=mis_opts[i];
         document.getElementById("tipo").options[i].text=mis_opts[i];


        }//fin de for
      }else{
        //si no habia ninguna opcion seleccionada, elimino las cosas del select
        document.getElementById("tipo").length = 1;
        //ponemos un texto en la unica opcion que hemos dejado
        document.getElementById("tipo").options[0].value = "0";
        document.getElementById("tipo").options[0].text = "Elige un Material";

      }
      //hacer un reset de las opciones
      document.getElementById("tipo").options[0].selected = true;


    });

y si preguntan del while que tengo en el select me traigo esos datos de una base de datos aqui les dejo el flagmento de php

PHP

<?php
require_once('../../../../model/conexion.php');

 $con = new Conexion();
 $con -> conectar();

$consulNave = "select * FROM modulos";
$datosNave = $con->query($consulNave) or trigger_error($con-> error." ".$consulNave);

    $convercion= 'select idusuarios from usuarios where nombre_completo = "'.$nombre_del_personal.'"';
    $datosconvercion = $con->query($convercion) or trigger_error($con-> error." ".$convercion);
    while ($filaconvert = $datosconvercion->fetch_array(MYSQLI_BOTH)) {
      $idpersonal = $filaconvert['idusuarios'];
    }

?>

si pudieran ayudarme a resolverlo o a guiarme para solucionarlo porfavor

1 respuesta 1

0

Creo que el problema es que siempre se está atacando al mismo id cuando duplicas el select, debes cambiar el mismo con cada clic que clona el contenido. Puedes hacer con una función parecida a esta:

$("#adicional").on('click', function(){
   $("#tabla tbody tr:eq(2)").clone().removeClass('fila-fija').appendTo("#tabla");
   $(".scroll .table.table-striped.margintabla table tbody tr:nth-child(2)").removeAttr("id");
   $(".scroll .table.table-striped.margintabla table tbody tr:nth-child(2)".attr("id","nuevoSelect");
});
1
  • Estuve viendo la funcion attr y el removeAttr para modificar el valor del atributo id pero no me funciono o no lo entendí muy bien si pudieras explicarmelo por favor, lo que dices es muy cierto de que sigue atacando el mismo id vi en otros foros que al hacer lo que hago el id deja de ser unico. el 10 ene. 2020 a las 23:06

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.