Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

232
Vistas
resetting html content after selecting from the select box

I am projecting the selected value with innerHTML, I want to reset the innerHTML after each selected value

 const body = document.body;
    function dropdown(e) {
      const select2 = document.querySelector(".select");
      let selected = select2.options[select2.selectedIndex].value;
      const div = document.createElement("div");
      div.innerHTML = `<div>${selected}</div>`;
      body.appendChild(div);
      select2.options[select2.selectedIndex].value = "";
    }
<select class="select" onchange="dropdown(event)">
      <option>choose</option>
      <option value="op1">Option 1</option>
      <option value="op2">Option 2</option>
    </select>

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Try adding the <div> in HTML instead of creating it everytime or you'll need to remove each one when a change event happens. When an element is removed or added to and from the DOM a reflow happens. A relow causes a broswer to recalculate position and distance of all content within the page. Changing an element that already exists on the page is less costly to browser processing. See this question on reflows and repaints. The example is a modified version of OP.

  • Do not use onevent attributes. Inline event handlers are garbage, so it's replaced by a onevent property handler, an .addEventListener() would be a better choice as well.

  • The event.target Event Object property is used to point to the changed element (ie .select), this would also work. No need to do a document.querySelector() inside of function.

  • 🞲Added selected and disabled to first <option> popup as an actual value.

  • To get the current value of a <select> .value property will suffice.

  • The <div> is referenced with .nextElementSibling of .select and the text is overwritten by .textContent property.

  • Use .selectedIndex = "0"; to reset .select instead of .value="".

🞲 As per Oskar Grosser's comments below.

document.querySelector(".select").onchange = dropdown;

function dropdown(e) {
  const sel = event.target;
  let selected = sel.value;
  const div = sel.nextElementSibling;
  div.textContent = selected;
  sel.selectedIndex = "0";
}
<select class="select">
  <option selected disabled>choose</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
</select>
<div></div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

You can save the element to a variable and then remove it when the function is called again. (oldDiv in the example implementation below.)

<select class="select">
  <option value="">choose</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
</select>

<script>
  let oldDiv = null // the newest created div will be stored here
  
  document.querySelector(".select").addEventListener("change", function(event) { // this way of adding an event listener is preferable, as it allows you to add multiple listeners to the same element
    if(oldDiv) oldDiv.remove() // remove the old div (if it exists)
    
    const div = document.createElement("div") // create new div
    div.textContent = event.target.value // set text content of new div to the selected value of the dropdown menu
    
    document.body.append(div) // add new div to body
    oldDiv = div // save new div in variable oldDiv, so it gets removed on next function call
  })
</script>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda