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  onchange="dropdown(event)">
      <option>choose</option>
      <option value="op1">Option 1</option>
      <option value="op2">Option 2</option>
    </select>

CodePudding user response：

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 >
  <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>

CodePudding user response：

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 a space as a value for first option so "chosen" doesn't 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="".

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 >
  <option default value=" ">choose</option>
  <option value="op1">Option 1</option>
  <option value="op2">Option 2</option>
</select>
<div></div>