有没有办法使用选定的选项更改HTML显示，从下拉菜单中不刷新？

Question

I have a table that gets data from xml files. Three different options (files) that can be chosen from a drop down menu. When one option is chosen, the table gets the data, but when another option is chosen, the table displays both files data unless i refresh the page. right now it works if I refresh after choosing a new option.

I've tried different if and else statements to load the files when an option is chosen. And I have tried to have a default blank option chosen but it doesn't do much.

HTML

  <div id="easy">Easy
    <select name="easy" id="easyS" onclick="getNumbers()">
      <option value="easy1">puzzle 1</option>
      <option value="easy2">puzzle 2</option>
      <option value="easy3">puzzle 3</option>
    </select>
  </div><br>

 <table class="grid">
 <tr id="1">
    <td class="numer1"></td>
    <td class="number"></td>
    <td class="numer2"></td>
    <td class="numer1"></td>
    <td class="number"></td>
    <td class="numer2"></td>
    <td class="numer1"></td>
    <td class="number"></td>
    <td class="numer2"></td>
 </tr>

JS

 function getNumbers() {
//this sends a request for the local XML file.
 var request = new XMLHttpRequest();
//if statement to get first puzzle mxl document.
if (document.getElementById("easyS").value == "easy1" || 
    document.getElementById("hardS").value == "hard1"){
      request.open("GET", "numbers.xml", false);
      request.send(null);

//this gets information from the XML file using the tags.
var xmldoc = request.responseXML;

var numbers = xmldoc.getElementsByTagName("number");
//this will take the information in the tags and store it in an array
var numArray = [];
for(var i = 0; i < numbers.length; i++){
    numArray.push(numbers[i].firstChild.data)
}
//here the class attribute will be used to display the information
//into the grid.
var printNum = document.getElementsByClassName("number");
x = printNum.length;
if (document.getElementById("easyS").value == "easy1"){
    while(x--){
    printNum[x].innerHTML = numArray[x];
    var cells = document.getElementsByTagName('td');
for(var prop in cells){
    if(cells[prop].innerHTML === ''){//this will only allow numbers in the text field, and a limit of one number at a time.
        cells[prop].innerHTML += '<input type="text"  onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="1"/>'
    }
 }
}   

I want to be able to choose one option and display the numbers in my table, then chose another option and have the information in the table gone and display the new information without having to refresh.

Answer 1

你可以使用更新面板，它将帮助你不再重新加载页面，你必须在控制器之前放置updatepanel（例如：gridview，html table，dropdownlist..etc）我认为它会对你有所帮助。

Answer 2

when you append your numb array in Js, make sure you make it empty on every change of element. so that you have new records every time you change your dropdown value