Question

我有一个从xml文件获取数据的表。可以从下拉菜单中选择三个不同的选项（文件）。选择一个选项时，表将获取数据，但是选择另一个选项时，表将显示两个文件的数据，除非我刷新页面。现在，如果我在选择新选项后刷新，它就会起作用。

在尝试选择选项时，我尝试了不同的if和else语句来加载文件。而且我尝试选择一个默认的空白选项，但是它没有太大作用。

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"/>'
    }
 }
}

我希望能够选择一个选项并在表中显示数字，然后选择另一个选项，使表中的信息消失并显示新信息而无需刷新。

Answer 1

您可以使用更新面板，它将帮助您不再重新加载页面，而您必须将updatepanel放置在控件之前（例如：gridview，html表，dropdownlist..etc），我认为它将为您提供帮助。

Answer 2

当您在Js中追加numb数组时，请确保在每次元素更改时都将其设为空。这样您每次更改下拉值时都会有新记录

是否有一种方法可以从下拉菜单中更改带有选定选项的HTML显示而无需刷新？

2 个答案: