resetting html content after selecting from the select box

Question

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>

Can you explain what *"reset HTML"* is? Resetting a form is a standard behavior, but resetting HTML isn't. — zer00ne, Mar 06 '22 at 22:17
I think I figured out [what](https://stackoverflow.com/a/71374771/2813224) you were trying to do. — zer00ne, Mar 06 '22 at 22:39

zer00ne · Answer 1 · 2022-03-07T03:51:09.613

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>

I don't think the `select` element is supposed to reset. If so, that would be bad for accessibility. — Oskar Grosser, Mar 07 '22 at 03:33
There is no `default` property on `option` elements. Did you mean to use `selected`? Also, to disable selecting it, you can use the `disabled` property, which would effectively make this option a "placeholder". — Oskar Grosser, Mar 07 '22 at 03:35

score 0 · Answer 2 · answered Mar 06 '22 at 22:58

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>

resetting html content after selecting from the select box

2 Answers2