El siguiente código muestra los datos de resultados de la tabla de acuerdo con la elección del cuadro de selección HTML, pero agrega los nuevos resultados al anterior. ¿Cómo mostrar solo los datos seleccionados actualmente?
<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>En su código, no agregó los resultados a la división de contenido , sino que los agregó al cuerpo. Es mejor envolver todo el resultado en un div. En cada evento OnChange , simplemente restablezca el html/borre el 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>Aquí hay otro enfoque ligeramente diferente. Preproceso la matriz de viajes primero en un objeto que luego devolverá bits de HTML para unirlos y colocarlos en 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>Intenté borrar los resultados de las selecciones anteriores mediante inneHTML y/o eliminando el elemento secundario con el siguiente código antes del bucle for, es decir. for (var i=0; i < 9; i++) responsable de la visualización (pero aún no ha tenido éxito):
document.getElementById("content").innerHTML = ""; const myNode = document.getElementById("content"); while (myNode.firstChild) { myNode.removeChild( myNode.lastChild ); } while (myNode.lastElementChild) { myNode.removeChild(myNode.lastElementChild); }