2

tengo una tabla llamada COLABORADOR con campos ID, CODIGO, NOMBRE Y DNI, deseo que al seleccionar el nombre de cada colaborador que se muestre en el combobox, me muestre los datos de CODIGO, DNI en los campos de texto, de acuerdo a la seleccion que se haga en el combobox (SELECT).

Acá dejo el codigo, ya tengo llenada el combobox con los datos de los colaboradores.

Gracias de antemano, un saludo.

EDITO:

Investigando como podría realizarlo, me tope con el siguiente código Javascript, pero solo me muestra el valor que pongo en el VALUE del OPTION en el SELECT, por lo que solo muestra el ID de mi tabla de mi base de datos. Pero yo deseo que adicional a eso me muestre los demas datos de los campos de la tabla colaborador que tengo en mi base de datos.

El nombre de mi base de datos es: asistencia Tiene una tabla llamada colaborador Y en esa tabla tiene los siguientes campos: id_colaborador, codigo, nombre, dni

<!DOCTYPE html>
<html>
<head>
  <title>Demo de menú desplegable</title>
  <meta charset="utf-8" />
 
</head>


<body>

                    <script type="text/javascript">
                    function mostrar() {
                      var colaborador= document.getElementById("colaborador"),
                         codigo = document.getElementById("codigo");
                         
                        codigo.value  = colaborador.value;
                   
                    
                    }


                    </script>



 <div align="center"> 


  
      <select id="colaborador"  name="colaborador" onchange="mostrar()">
        
        <option value="">Seleccione:</option>
        
        <?php
       
          
          $query = $conn -> query ("SELECT * FROM colaborador");


          while ($valores = mysqli_fetch_array($query)) {
            echo '<option value="'.$valores[codigo].' ">'.$valores[nombre].'</option>';
           
          }
        ?>


      </select>

                <br>  <br>  <br>  <br>  <br>  <br> 
              CODIGO: <input type="text" name="codigo"  id="codigo">

            <br>  <br>
             DNI: <input type="text" name="dni" id="dni">

  </div>

</body>

</html>


Alguna ayuda? Hasta ahora solo he podido mostrar el ID de cada colaborador en un campo de texto..

10
  • No se entiende la pregunta. ¿Quieres que cuando se cambie un option los campos input se actualicen? ¿Con qué datos?
    – A. Cedano
    Commented el 5 nov. 2019 a las 23:26
  • Tengo un select, y cuando seleccione uno de los datos que estan en el select, se muestren datos en los campos de texto segun la seleccion que se haga en el SELECT
    – EDG_DGK
    Commented el 5 nov. 2019 a las 23:37
  • Ok, pero, ¿ qué datos quieres que se muestren y dónde están esos datos ?
    – A. Cedano
    Commented el 5 nov. 2019 a las 23:42
  • están en una base de dato en donde ya tengo hecha la conexion.
    – EDG_DGK
    Commented el 5 nov. 2019 a las 23:46
  • Supongo que quieres algo como esto. Puedes usar los atributos data- para poner info en cada option y mostrarlo en el on.change mediante Javascript. Sería traer los datos en el SELECT de la base de datos, y cuando creas los option usas atributos data- para poner los valores de cada caso.
    – A. Cedano
    Commented el 5 nov. 2019 a las 23:46

1 respuesta 1

4

En HTML/Javascript necesitas escuchar los eventos onchange del select e implementar atributos de datos.

Si lo pruebas verás que funciona. Luego te muestro cómo lograr crear este select desde PHP, usando los datos de la base de datos.

HTML/Javascript

document.getElementById('colaboradores').onchange = function() {
  /* Referencia al option seleccionado */
  var mOption = this.options[this.selectedIndex];
  /* Referencia a los atributos data de la opción seleccionada */
  var mData = mOption.dataset;

  /* Referencia a los input */
  var elId = document.getElementById('id');
  var elCodigo = document.getElementById('codigo');
  var elNombre = document.getElementById('nombre');
  var elDni = document.getElementById('dni');

  /* Asignamos cada dato a su input*/
  elId.value = this.value;
  elCodigo.value = mData.codigo;
  elNombre.value = mOption.text; /*Se usará el valor que se muestra*/
  elDni.value = mData.dni;
};
<select id="colaboradores">
  <option value="0" data-codigo="" data-dni="" selected disabled>--Seleccione colaborador--</option>
  <option value="1" data-codigo="A1" data-dni="111">Pedro</option>
  <option value="2" data-codigo="M1" data-dni="222">María</option>
  <option value="3" data-codigo="S1" data-dni="333">Santiago</option>
</select>
<hr />
<input id="id" type="text" placeholder="id" />
<input id="codigo" type="text" placeholder="código" />
<input id="nombre" type="text" placeholder="nombre" />
<input id="dni" type="text" placeholder="DNI" />


PHP

Has dicho que las columnas de tu tabla son las siguientes: id_colaborador, codigo, nombre, dni

Asumiendo que todo marcha bien, te muestro solamente el bloque de lectura de datos donde construirías el select como se muestra más arriba:

<div align="center">   
    <select id="colaboradores">
        <option value="0" data-codigo="" data-dni="" selected disabled>--Seleccione colaborador--</option>
<?php          
        $query = $conn -> query ("SELECT * FROM colaborador");
        while ($row = $query->fetch_assoc()) {
            $data="data-codigo=\"$row[codigo]\" data-dni=\"$row[dni]\""; #Como atributo data sólo irán codigo y dni
            $value="value=\"$row[id_colaborador]\"";                      #El id_colaborador lo tomaremos del value
            echo "<option $value $data>$row[nombre]</option>";           #El nombre lo tomaremos del text
        }
?>
    </select>
<hr />
    <input id="id" type="text" placeholder="id" />
    <input id="codigo" type="text" placeholder="código" />
    <input id="nombre" type="text" placeholder="nombre" />
    <input id="dni" type="text" placeholder="DNI" />
</div>

Este código debería producir lo mismo que hay arriba y funcionaría igual. He aplicado algunas mejoras, como evitar las llamadas in line desde Javascript, por ser una práctica no recomendada. Mientras más independiente sea tu HTML mejor, luego, puedes escuchar los cambios del select por su id. También he corregido la mezcla de estilos en la lectura de la base de datos en el código PHP, usando además un método más específico que es fetch_assoc, ya que fetch_array te trae los datos dos veces, como array asociativo y numérico.

Si hay algún problema lo dices en comentarios. Espero te sirva.

3
  • Muchas gracias por la respuesta bien detallada, se agradece. Acabo de probarlo,al codigo PHP que comentas, le agregué el codigo Javascript de arriba, pero solo me jala los datos en el SELECT, aún no me muestra nada en los inputs, que mas debo agregarle?
    – EDG_DGK
    Commented el 8 nov. 2019 a las 1:59
  • @EDG_DGK tienes que agregarle el código Javascript tal y como aparece en la primera parte de la respuesta. Primer bloque de código en el apartado HTML/Javascript.
    – A. Cedano
    Commented el 8 nov. 2019 a las 13:15
  • Muchísimas gracias, me sirvió. Lo que pasaba era que estaba poniendo el codigo Javascript en un lugar erróneo. Además, noté que en una línea del codigo PHP que comentaste, le faltaba una comilla, antes de la variable ROW: $value="value=\"$row[id_colaborador]\"";
    – EDG_DGK
    Commented el 8 nov. 2019 a las 21:48

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.