如何在javascript中只显示HTML select框中当前选中的数据？

Question

以下代码根据来自 HTML select 框的选择显示表中的结果数据，但它将新结果附加到前一个结果。 如何只显示当前选中的数据？

 <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

在您的代码中，您没有 append 结果到内容div，而是 append 到正文。 最好将所有结果包装在一个 div 中。 在每个OnChange事件中，只需重置 html/清除 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

这是另一种略有不同的方法。 我首先将 trips 数组预处理为 object，然后返回 HTML 的位以加入并放入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. 尝试通过 inneHTML 清除先前选择的结果和/或在 for 循环之前使用以下代码删除子元素，即。 for (var i=0; i < 9; i++) 负责显示（但尚未成功）：

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