将同一项目多次添加到列表中答案

【问题标题】：Adding same item too many times to a list将同一项目多次添加到列表中
【发布时间】：2015-06-24 09:14:49
【问题描述】：

我正在尝试通过 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>');
};

【问题讨论】：

标签： javascript jquery list select

【解决方案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);
}

问题是您将名称添加到所有选择外循环的每个迭代中，即带有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

【讨论】：

我最初尝试过这个，但无论出于何种原因，如果我删除循环，列表不会被填充。这对我来说没有多大意义
@Drew 一个简单的解决方法是离开循环但只进行 1 次迭代。我将编辑我的答案以显示...
@Drew 那里我更新了答案，你也不需要 ; 在你的循环结束...
感谢您的帮助。如果我尝试在q 所在的位置添加i，那么我会收到相同的错误10 次：TypeError: Cannot read property 'add' of null。但是如果上面定义了它怎么可能是null呢？
@Drew 只需使用console.log(EachName) 检查您的EachName 变量

【解决方案2】：

这里发生的一些事情会导致您出现问题：您的 q 循环仅在包含它的 i 循环的 1 次迭代（以及之后的每次迭代）之后运行，因此它试图选择没有t 尚未创建，并且总共选择了第一个 10 次 :( 还要在循环之外声明名称，因为没有理由声明它 10 次。

我没有你的 textFile，所以我创建了一个包含一些名称的假数组，以便为我快速制作的版本创建类似的效果。 [编辑] 将您的 jQuery 位替换回我之前使用数组进行演示的位置。

var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
for(i = 0; i < 10; i++){
  //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>');
  document.write('</td>');
  document.write('</tr>');
}
var eachName;
jQuery.get(textFile, function(textFileData) { 
  eachName = textFileData.split("\n");
});
for (q = 0; q < 10; q++) {
  var select = document.getElementById(names[q]);
  for (var j = 0; j < eachName.length; j++) {
    var option = document.createElement('option');
    option.text = option.value = eachName[j];
    select.add(option, 0);
  }
}

【讨论】：

感谢您的输入，但不幸的是，该列表有大约 500 个不同的名称，因此最好将其保存在文本文件中
这很好，将我的数组声明换成你的 jQuery。我将编辑帖子，使其正常工作。
在其中一个循环中包含你的 jQuery 也是一个坏主意，因为它只需要执行一次就运行了 10 次。

【解决方案3】：

这最终奏效了。我需要跳出第一个 for 循环，然后遍历并将名称添加到列表中

            for(i = 0; i < 10; i++){
                var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
                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>'); 
                document.write('</td>');
                document.write('</tr>');    
            };

            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);
                 };
                     };
             });

【讨论】：