1

Necesito llenar varios Select con la misma información, pero solo me la muestra en el primer Select y no en los que se van agregando. No se como resolverlo. Usé document.getElementsByName porque con document.getElementById no se puede ya que el ID debe ser único. Aquí les muestro mi código, soy nuevo programando, agradezco mucho su ayuda. Gracias de antemano.

el botón agregar crean nuevos select

Al dar al botón agregar se crean nuevos select donde debería cargar la información también pero no sale.

HTML

<h4>REALIZAR PEDIDOS</h4>

<div class="caja-pedidos">
   <div class="label-pedidos">
       <label id="label-tipoP">TIPO</label>
       <label id="label-pedido">PEDIDO</label>
       <label id="label-precio">PRECIO</label>
       <label id="label-cantidad">CANT</label>
   </div>
   <div class="realizar-pedidos" id="realizarPedidos">
       <div class="realizar-pedidos">
           <select id="tipo-pedido" class="form-select" name="tipo-pedido">
               <option></option>
           </select>
           <select id="pedido" class="form-select">
               <option> </option>
           </select>
           <input id="precio-pedido" readonly placeholder="$" class="form-control">
           <input type="number" id="cant-pedido" min="1" value="1" class="form-control"> 
       </div>
   </div>
                   

   <!-- <label id="observacion">OBSERVACIONES</label> -->
<div class="text-area">
<textarea id="obser-pedido" placeholder="OBSERVACIONES" class="form-control"></textarea>
   </div>
       <div class="btn-agregar22">
<button type="button" class="btn-agregar" id="btn-editar" onclick="agregarNuevo()"><i class="bi bi-plus-square-fill"></i> Agregar </button>
   </div>

JAVASCRIPT

//LLENAR EL PRIMER SELECT... 

  function myOnLoad() {
    cargarSelect()
   }

  function cargarSelect(){
    let menuTiposPlatos = ["Perros", "Hamburguesas", "Pizzas",  ]

    agregarOpciones("tipo-pedido", menuTiposPlatos);
  }
  function agregarOpciones(domElement, menuTiposPlatos) {
    var select = document.getElementsByName(domElement)[0];
   
    for (value in menuTiposPlatos) {
     var option = document.createElement("option");
     option.text = menuTiposPlatos[value];
     select.add(option);
    }
   }


 function agregarNuevo(){
        let realizarPedidos = document.getElementById('realizarPedidos')
        let newDiv = document.createElement("div");

        newDiv.innerHTML += `
        <div class="realizar-pedidos">
            <select class="form-select" name="tipo-pedido">
                <option></option>
            </select>
            <select class="form-select">
                <option> </option>
            </select>
            <input id="precio-pedido" readonly placeholder="$" class="form-control">
            <input type="number" id="cant-pedido" min="1" value="1" class="form-control"> 
        </div>
        `

        realizarPedidos.appendChild(newDiv)
        console.log(realizarPedidos)
    }

1 respuesta 1

0

Primero un consejo: No uses eventos en línea, del tipo <body onload="cargarSelect()"> o <button onclick="funcion()">, es mejor dejar el HTML legible y sin "distractores", asignando los eventos por medio de Javascript. Esto te va a facilitar el mantenimiento de tus proyectos.

Ahora, para resolver el problema, cuando se cargue la página y se agregue un nuevo select, ejecuta la función y toma el último elemento, que es donde vas a agregar las opciones. Lee los comentarios en el código para entender mejor:

// Llenar primer select al cargar la página
document.addEventListener('DOMContentLoaded', cargarSelect);

// Asignar evento a botón
document.querySelector('#btn-editar').addEventListener('click', agregarNuevo);

function cargarSelect(){
    let menuTiposPlatos = ["Perros", "Hamburguesas", "Pizzas",  ]
    agregarOpciones("tipo-pedido", menuTiposPlatos);
}

function agregarOpciones(domElement, menuTiposPlatos) {
    // Cargar todos los selects
    let selects = document.getElementsByName(domElement);
    // Seleccionar el último
    let select = selects[selects.length - 1];
    
    for (value in menuTiposPlatos) {
        let option = document.createElement("option");
        option.text = menuTiposPlatos[value];
        select.add(option);
    }
}

function agregarNuevo(){
    let realizarPedidos = document.getElementById('realizarPedidos')
    let newDiv = document.createElement("div");

    newDiv.innerHTML += `
        <div class="realizar-pedidos">
            <select class="form-select" name="tipo-pedido">
                <option></option>
            </select>
            <select class="form-select">
                <option> </option>
            </select>
            <input id="precio-pedido" readonly placeholder="$" class="form-control">
            <input type="number" id="cant-pedido" min="1" value="1" class="form-control"> 
        </div>
        `;

    realizarPedidos.appendChild(newDiv);
    // Llenar select agregado
    cargarSelect();
}
<h4>REALIZAR PEDIDOS</h4>

<div class="caja-pedidos">
   <div class="label-pedidos">
       <label id="label-tipoP">TIPO</label>
       <label id="label-pedido">PEDIDO</label>
       <label id="label-precio">PRECIO</label>
       <label id="label-cantidad">CANT</label>
   </div>
   <div class="realizar-pedidos" id="realizarPedidos">
       <div class="realizar-pedidos">
           <select id="tipo-pedido" class="form-select" name="tipo-pedido">
               <option></option>
           </select>
           <select id="pedido" class="form-select">
               <option> </option>
           </select>
           <input id="precio-pedido" readonly placeholder="$" class="form-control">
           <input type="number" id="cant-pedido" min="1" value="1" class="form-control"> 
       </div>
   </div>
                   

   <!-- <label id="observacion">OBSERVACIONES</label> -->
<div class="text-area">
<textarea id="obser-pedido" placeholder="OBSERVACIONES" class="form-control"></textarea>
   </div>
       <div class="btn-agregar22">
<button type="button" class="btn-agregar" id="btn-editar"><i class="bi bi-plus-square-fill"></i> Agregar </button>
   </div>

1
  • Excelente, muchas gracias por tu aporte me funcionó muy bien. Gracias por los consejos también. Commented el 20 abr. 2021 a las 2:10

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.