[英]How to display in javascript only the current selected data from HTML select box?
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.以下代码根据来自 HTML select 框的选择显示表中的结果数据,但它将新结果附加到前一个结果。 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>
In your code, you didn't append the results to content div, but you append it to body instead.在您的代码中,您没有 append 结果到内容div,而是 append 到正文。 It's better to wrap all the result in a div.最好将所有结果包装在一个 div 中。 On every OnChange
event, simply reset the html/clear the 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>
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
:我首先将 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>
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. I. 尝试通过 inneHTML 清除先前选择的结果和/或在 for 循环之前使用以下代码删除子元素,即。 for (var i=0; i < 9; i++) responsible for the display (but not succeded yet): 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.