Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

235
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda