javascript - 向列表中添加相同项目的次数过多

Question

我正在尝试通过 javascript 将相同的名称列表添加到 html 中的 10 个不同的选择表单中。 虽然此代码有效，但它会将名称列表添加到每个框中 10 次。但是，如果我没有 q 循环，则根本不会添加任何内容。

我真的不知道我做错了什么，但我只是不想将相同的名称列表添加 10 次。有什么想法吗？

谢谢!

for(i = 0; i < 10; i++){
  var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  //window.alert(names[i])
  document.write('<tr>');
  document.write('<td>');
  document.write('Enter name '+ names[i]);
  document.write('</td>');
  document.write('<td>');
  document.write('<select name=' + i + ' id=' + names[i] + '></select>');     
  var textFile = "/names.txt";       
  jQuery.get(textFile, function(textFileData) { 
  var EachName= textFileData.split("\n");
  for (q = 0; q < 10; q++) { 
    var select = document.getElementById(names[q]);
    for (var j = 0, len = EachName.length; j < len; j++) {
       var option = document.createElement('option');
       option.text = option.value = EachName[j];
       select.add(option, 0);
    }
   }
});
document.write('</td>');
document.write('</tr>');
};

Answer 1

看看这个:

 for (q = 0; q < 10; q++) { 
     var select = document.getElementById(names[i]); //q should be i here...

事实上你根本不需要循环:

var EachName= textFileData.split("\n");
var select = document.getElementById(names[i]);
for (var j = 0, len = EachName.length; j < len; j++) {
   var option = document.createElement('option');
   option.text = option.value = EachName[j];
   select.add(option, 0);
}

问题是您将名称添加到 all 选择外循环的每次迭代，即带有 i 的迭代。

尝试此更新:

for(i = 0; i < 10; i++){
  var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
  //window.alert(names[i])
  document.write('<tr>');
  document.write('<td>');
  document.write('Enter name '+ names[i]);
  document.write('</td>');
  document.write('<td>');
  document.write('<select name=' + i + ' id=' + names[i] + '></select>');     
  var textFile = "/names.txt";       
  var closure = function(counter, namesArray) {
     return function(textFileData) {
         var EachName= textFileData.split("\n");
         var select = document.getElementById("" + namesArray[counter]);
         for (var j = 0, len = EachName.length; j < len; j++) {
             var option = document.createElement('option');
             option.text = option.value = EachName[j];
             select.add(option, 0);
         }
     };
  }
  jQuery.get(textFile, closure(i, names));
  document.write('</td>');
  document.write('</tr>');
};

I got the code from here