如何为动态生成的下拉框填充选项？求助修正获取下拉框的代码

嘿，我来帮你搞定这个问题！你动态生成的下拉框id是contact-type1、contact-type2这种格式，原来那行获取元素的代码写法不对——getElementById需要精确匹配的id字符串，你写的'contact-type[*n]'是字面量字符串，浏览器会去寻找id正好是这个值的元素，而不是自动替换n为数字。下面给你两种修正方案，按需选择：

方案1：填充单个指定序号的下拉框 #

如果你的需求是单独填充第n个下拉框，可以给函数传入n作为参数，通过字符串拼接生成正确的id：

function fillContactTypes(n) {
  var types = ["Phone","Whatapp","Facebook","Web","Fax"];
  // 修正：把n拼接到id字符串后，生成正确的元素id
  var select = document.getElementById('contact-type' + n);
  
  // 可选：先清空下拉框原有选项，避免重复填充
  select.innerHTML = '';
  
  for(var i = 0; i < types.length; i++) {
    var option = document.createElement('option');
    option.textContent = types[i]; // 用textContent比innerHTML更安全，避免注入风险
    option.value = types[i];
    select.appendChild(option);
  }
}

// 调用示例：填充第1个下拉框
fillContactTypes(1);
// 填充第2个下拉框
fillContactTypes(2);

方案2：批量填充所有contact-type开头的下拉框 #

如果要一次性处理所有动态生成的下拉框，可以用querySelectorAll匹配所有id以contact-type开头的select元素：

function fillAllContactTypes() {
  var types = ["Phone","Whatapp","Facebook","Web","Fax"];
  // 获取所有id以contact-type开头的select元素
  var selects = document.querySelectorAll('select[id^="contact-type"]');
  
  selects.forEach(function(select) {
    select.innerHTML = '';
    types.forEach(function(type) {
      var option = document.createElement('option');
      option.textContent = type;
      option.value = type;
      select.appendChild(option);
    });
  });
}

// 调用：批量填充所有符合条件的下拉框
fillAllContactTypes();

内容的提问来源于stack exchange，提问作者Nida Amin