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

问题是你将所有名称添加到外部循环的每次迭代时选择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

Answer 2

这里发生了一些导致你出现问题的事情：你的q循环只在包含它的i looop的1次迭代（以及之后的每次迭代）之后运行，所以它试图选择避开的元素尚未创建以及总共选择第一个10次:(并在循环外声明名称，因为没有理由将其声明10次。

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

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

将相同项目添加到列表中的次数太多

3 个答案: