Как отобразить в javascript только текущие выбранные данные из поля выбора HTML?

#javascript #html

Вопрос:

Следующий код отображает данные результатов из таблицы в соответствии с выбором в поле выбора HTML, но добавляет новые результаты к предыдущим. Как отобразить только текущие выбранные данные?

 <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>

Ответ №1:

В своем коде вы не добавляли результаты в раздел содержимого, а вместо этого добавляли их в тело. Лучше обернуть весь результат в 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>

1. Большое вам спасибо, я просто скучаю по этому.

2. Добро пожаловать! Надеюсь, это помогло. Кроме того, лучше удалить свой ответ и вместо этого обновить исходный вопрос.

Ответ №2:

Вот еще один несколько иной подход. Я предварительно обрабатываю массив trips сначала в объект, который затем вернет биты 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>

Ответ №3:

Я попытался очистить результаты предыдущих выборок с помощью inneHTML и/или удалить дочерний элемент с последующим кодом перед циклом for, т. Е. для (var i=0; i :

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