How to display in javascript only the current selected data from HTML select box?

Question

The following code displays results data from the table according to the choice from HTML select box, but it appends the new results to the previous one. How to display only the current selected data?

 <script> function GetSelectedText() { const trips = [ ["AAA", "London"], ["AAA", "Manchester"], ["AAA", "Oxford"], ["BBB", "Paris"], ["BBB", "Lyon"], ["BBB", "Marsylia"], ["CCC", "Berlin"], ["CCC", "Hamburg"], ["CCC", "Bonn"] ] var oSel = document.getElementById("country"); var wybrano = oSel.options[oSel.selectedIndex].text; var parent = document.getElementById("wybrano"); for (var i = 0; i < 9; i++) { if (wybrano == trips[i][0]) { divy = document.createElement("div"); divy.innerHTML = '<p>' + i + ' ' + trips[i][1] + '</p>'; document.body.appendChild(divy); } } } </script> <form id="Forma"> <select id="country" onChange="GetSelectedText()"> <option value="0"> country </option> <option value="1"> AAA </option> <option value="2"> BBB </option> <option value="3"> CCC </option> </select> </form> <div id="content"></div>

Answer 1

In your code, you didn't append the results to content div, but you append it to body instead. It's better to wrap all the result in a div. On every OnChange event, simply reset the html/clear the div.

 <script> function GetSelectedText() { const trips = [ ["AAA","London"],["AAA","Manchester"],["AAA","Oxford"], ["BBB","Paris"],["BBB","Lyon"],["BBB","Marsylia"], ["CCC","Berlin"],["CCC","Hamburg"],["CCC","Bonn"] ] var oSel = document.getElementById("country"); var wybrano = oSel.options[oSel.selectedIndex].text; var content = document.getElementById('content'); //Remove Previous Content //const myNode = content; //while (myNode.firstChild) { // myNode.removeChild( myNode.lastChild ); //} //while (myNode.lastElementChild) { // myNode.removeChild(myNode.lastElementChild); //} //Or Simply content.innerHTML = ""; for (var i=0; i < 9; i++) { if ( wybrano == trips[i][0]) { divy = document.createElement("div"); divy.innerHTML = '<p>'+i+' '+trips[i][1]+'</p>'; content.appendChild( divy ); } } } </script> <form id="Forma"> <select id="country" onChange="GetSelectedText()"> <option value="0"> country </option> <option value="1"> AAA </option> <option value="2"> BBB </option> <option value="3"> CCC </option> </select> </form> <div id="content"> </div>

Answer 2

Here is another slightly different approach. I pre-process the trips array first into an object that will then return bits of HTML to be joined and put into the content.innerHTML :

 const trips = [ ["AAA","London"],["AAA","Manchester"],["AAA","Oxford"], ["BBB","Paris"],["BBB","Lyon"],["BBB","Marsylia"], ["CCC","Berlin"],["CCC","Hamburg"],["CCC","Bonn"] ].reduce((a,[k,t],i)=>((a[k]=a[k]||[]).push("<p>"+i+" "+t+"</p>"),a),{}), oSel = document.getElementById("country"), content=document.getElementById("content"); function GetSelectedText() { content.innerHTML = (trips[oSel.options[oSel.selectedIndex].text]?? ["no selection made"]).join(""); }

 <form id="Forma"> <select id="country" onChange="GetSelectedText()"> <option value="0"> country </option> <option value="1"> AAA </option> <option value="2"> BBB </option> <option value="3"> CCC </option> </select> </form> <div id="content"> </div>

Answer 3

I. tried to clear the results of the previous selections by inneHTML and/or removing the child element with the folowing code before the for loop ie. for (var i=0; i < 9; i++) responsible for the display (but not succeded yet):

  document.getElementById("content").innerHTML = ""; 
  const myNode = document.getElementById("content");
  while (myNode.firstChild) {
         myNode.removeChild( myNode.lastChild );
  } 
  while (myNode.lastElementChild) {
         myNode.removeChild(myNode.lastElementChild);
  }