Javascript 将同一项添加到列表的次数过多

我试图通过javascript将相同的名称列表添加到10个不同的html选择表单中。 此代码工作时，会将名称列表添加到每个框中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>');
};

（i=0；i<10；i++）的

{
变量名称=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]
//window.alert（名称[i]）
文件。写（“”）；
文件。写（“”）；
文件。写入（'输入名称'+名称[i]）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
var textFile=“/names.txt”；
get（textFile，函数（textFileData）{
var EachName=textFileData.split（“\n”）；
对于（q=0；q<10；q++）{
var select=document.getElementById（名称[q]）；
对于（var j=0，len=EachName.length；j

查看以下内容：

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

---

这里发生的一些事情会给您带来问题：您的q循环只在包含它的i looop的1次迭代（以及此后的每次迭代）后运行，因此它尝试选择尚未创建的元素，以及总共选择10次第一个元素：（也在循环之外声明名称，因为没有理由声明10次

我没有你的文本文件，所以我创建了一个带有一些名称的假数组，以创建与我快速制作的版本类似的效果。[编辑]将你的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);
  }
}

var名称=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]；
对于（i=0；i<10；i++）{
//window.alert（名称[i]）
文件。写（“”）；
文件。写（“”）；
文件。写入（'输入名称'+名称[i]）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
}
var eachName；
get（textFile，函数（textFileData）{
eachName=textFileData.split（“\n”）；
});
对于（q=0；q<10；q++）{
var select=document.getElementById（名称[q]）；
对于（var j=0；j

这最终奏效了。我需要打破第一个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);
                 };
                     };
             });   

（i=0；i<10；i++）的

{
变量名称=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]
文件。写（“”）；
文件。写（“”）；
文件。写入（'输入名称'+名称[i]）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
文件。写（“”）；
};
var textFile=“/names.txt”；
get（textFile，函数（textFileData）{
var EachName=textFileData.split（“\n”）；
对于（q=0；q<10；q++）{
var select=document.getElementById（名称[q]）；
对于（var j=0，len=EachName.length；j

我最初尝试过这个方法，但无论出于什么原因，如果我删除循环，列表都不会被填充。这对我来说没有多大意义me@Drew一个简单的解决方法是离开循环，但只进行一次迭代。我将编辑我的答案，以显示…@Drew在那里我更新了答案，您也不需要在循环结束时使用

；

s、 …谢谢你的帮助。如果我尝试将

I

添加到

q

所在的位置，那么我会收到10次相同的错误：

TypeError:无法读取null的属性“add”

。但是如果上面定义了它，它怎么可能是null呢？@Drew只需使用

console.log（EachName）检查
EachName
变量

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

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

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