Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

229
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!