Skip to main content
Campo como arreglo
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

En Javascript es muy sencillo accederComo tienes varias filas, revisano puedes repetir ID, deben ser únicos y, además, si planeas procesar todo con un formulario, debes cambiar los comentarios dentronombres para que se manejen como arreglo y se envíen todos en lugar de la funciónuno: <select name="codigo[]">.

Cuando se modifique un select es necesario obtener el contenedor padre (TR) y, desde ahí, puedes acceder al input para actualizar el nombre.

function cambioOpciones() {
    // El evento siempre está disponible en la función
    // event.target es el elemento que lo disparó (select name="codigo")
    let sel = event.target;
    // Definir valor inicial
    let value = '';
    // Si se seleccionó una opción
    if(event.target.value) {
        // Tomar nombre desde data-nombre de la opción seleccionada
        value = sel.options[sel.selectedIndex].dataset.nombre;
    }
    // AsignarObtener valorfila ala la que pertenece el select
    let tr = sel.closest('tr');
    
    // Obtener campo desde TR, por atributo name y asignar valor
    documenttr.querySelector('#showId''[name="nombre[]"]').value = value;
}
<table>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo"name="codigo[]" id='opciones'onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre[]">
  </td>
</tr>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo[]" onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre"name="nombre[]">
 id="showId"> </td>
</tr>
</table>

SoloAl procesar el formulario en PHP, vas a recibir los campos como referenciaarreglos y debes recorrerlos para realizar las acciones correspondientes, document.querySelector('#showId'); hace exactamente lo mismo que document.getElementById('showId');como insertar o actualizar en base de datos:

<?php
// Creas las variables enviadas con el formulario
$codigos = $_POST['codigo'];
$nombres = $_POST['nombre'];

// Recorres por índice, todos los campos tendrán la misma cantidad de elementos
foreach($codigos as $indice => $codigo) {
    $nombre = $nombres[$indice];
    // Aquí ya puedes usar $codigo y $nombre para lo que necesites
}

En Javascript es muy sencillo acceder, revisa los comentarios dentro de la función:

function cambioOpciones() {
    // El evento siempre está disponible en la función
    // event.target es el elemento que lo disparó (select name="codigo")
    let sel = event.target;
    // Definir valor inicial
    let value = '';
    // Si se seleccionó una opción
    if(event.target.value) {
        // Tomar nombre desde data-nombre de la opción seleccionada
        value = sel.options[sel.selectedIndex].dataset.nombre;
    }
    // Asignar valor al campo
    document.querySelector('#showId').value = value;
}
<select class="col-12 form-control mr-sm-2 " name="codigo" id='opciones' onchange='cambioOpciones();'> 
    <option disabled selected> - Seleccione - </option>
    <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
    <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
    <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
    <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
    <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
</select>
<input class="form-control mr-sm-2 col-12" type="text"  name="nombre" id="showId">

Solo como referencia, document.querySelector('#showId'); hace exactamente lo mismo que document.getElementById('showId');

Como tienes varias filas, no puedes repetir ID, deben ser únicos y, además, si planeas procesar todo con un formulario, debes cambiar los nombres para que se manejen como arreglo y se envíen todos en lugar de uno: <select name="codigo[]">.

Cuando se modifique un select es necesario obtener el contenedor padre (TR) y, desde ahí, puedes acceder al input para actualizar el nombre.

function cambioOpciones() {
    // El evento siempre está disponible en la función
    // event.target es el elemento que lo disparó (select name="codigo")
    let sel = event.target;
    // Definir valor inicial
    let value = '';
    // Si se seleccionó una opción
    if(event.target.value) {
        // Tomar nombre desde data-nombre de la opción seleccionada
        value = sel.options[sel.selectedIndex].dataset.nombre;
    }
    // Obtener fila a la que pertenece el select
    let tr = sel.closest('tr');
    
    // Obtener campo desde TR, por atributo name y asignar valor
    tr.querySelector('[name="nombre[]"]').value = value;
}
<table>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo[]" onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre[]">
  </td>
</tr>
<tr>
  <td>
    <select class="col-12 form-control mr-sm-2 " name="codigo[]" onchange='cambioOpciones();'> 
      <option disabled selected> - Seleccione - </option>
      <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
      <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
      <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
      <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
      <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
    </select>
  </td>
  <td>
    <input class="form-control mr-sm-2 col-12" type="text"  name="nombre[]">
  </td>
</tr>
</table>

Al procesar el formulario en PHP, vas a recibir los campos como arreglos y debes recorrerlos para realizar las acciones correspondientes, como insertar o actualizar en base de datos:

<?php
// Creas las variables enviadas con el formulario
$codigos = $_POST['codigo'];
$nombres = $_POST['nombre'];

// Recorres por índice, todos los campos tendrán la misma cantidad de elementos
foreach($codigos as $indice => $codigo) {
    $nombre = $nombres[$indice];
    // Aquí ya puedes usar $codigo y $nombre para lo que necesites
}
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Si no tienes posibilidad de guardar el nombre como texto de cada opción, puedes usar atributo de datos, solo agregando data-nombre="Nombre del producto" después del valor:

<?php
        while($datos = mysqli_fetch_array($consulta_producto)){
                //array recorre datos                               
?>
                <option value="<?php echo $datos['codigo']?>" data-nombre="<?php echo $datos['nombre']?>"><?php echo $datos['codigo'] ?></option>
<?php } ?>

En Javascript es muy sencillo acceder, revisa los comentarios dentro de la función:

function cambioOpciones() {
    // El evento siempre está disponible en la función
    // event.target es el elemento que lo disparó (select name="codigo")
    let sel = event.target;
    // Definir valor inicial
    let value = '';
    // Si se seleccionó una opción
    if(event.target.value) {
        // Tomar nombre desde data-nombre de la opción seleccionada
        value = sel.options[sel.selectedIndex].dataset.nombre;
    }
    // Asignar valor al campo
    document.querySelector('#showId').value = value;
}
<select class="col-12 form-control mr-sm-2 " name="codigo" id='opciones' onchange='cambioOpciones();'> 
    <option disabled selected> - Seleccione - </option>
    <option value="Código 1" data-nombre="Nombre de producto 1">Código 1</option>
    <option value="Código 2" data-nombre="Nombre de producto 2">Código 2</option>
    <option value="Código 3" data-nombre="Nombre de producto 3">Código 3</option>
    <option value="Código 4" data-nombre="Nombre de producto 4">Código 4</option>
    <option value="Código 5" data-nombre="Nombre de producto 5">Código 5</option>
</select>
<input class="form-control mr-sm-2 col-12" type="text"  name="nombre" id="showId">

Solo como referencia, document.querySelector('#showId'); hace exactamente lo mismo que document.getElementById('showId');