如何在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);
  }