Javascript 动态填充选项值以动态添加下拉列表？

我通过在浏览器中呈现的代码动态添加下拉列表

   <select id="contact-type1"></select> 
   <select id="contact-type2"></select>
   ...

...

现在我正在尝试下面的代码来动态选择第n个下拉列表，以便填充其中的选项值

          function fillContactTypes()
        {
          var types = ["Phone","Whatapp","Facebook","Web","Fax"];     
          var select = document.getElementById('contact-type[*n]');
          for(var i = 0; i < types.length; i++) 
          {
               var option = document.createElement('option');
               option.innerHTML = types[i];
               option.value = types[i];
               select.appendChild(option);
           }
        }

函数fillContactTypes（）
{
变量类型=[“电话”、“Whatapp”、“Facebook”、“Web”、“传真”]；
var select=document.getElementById（'contact-type[*n]'）；
对于（变量i=0；i

请在“var select=document.getElementById（'contact-type[*n]”行中帮助我；

---

“

我刚刚将公共类添加到所有下拉列表中，使用jquery可以动态绑定所有下拉列表，如下所示

var-types=[“电话”、“Whatapp”、“Facebook”、“网络”、“传真”]；
$（文档）.ready（函数（）{
fillContactTypes（）
});
函数fillContactTypes（）{
var myselect=$（''）；
$。每个（类型、功能（索引、键）{
追加（$（''）.val（key.html（key））；
});
$（'.contact-type'）.append（myselect.html（））；
}

fillContactTypes（）

没有参数，您将如何确定

*n

应该是什么？在您当前的代码中，您还可以硬编码

contact-type1

或

2

。这样做是否可行？您有多少种联系人类型？如果只有几个，为什么不显式地使用函数fillSocialMediaContactTypes（）和

document.getElementById（'contact-type-social-media'）

等等。。。为什么它们需要是动态的？不需要ID，而是向selects添加一个类，按类获取元素并遍历它们。此外，您的

类型也都是硬编码的。对于每个下拉列表，您将如何更改它们？如果要在每个下拉列表中填充相同的选项，请使用数据属性，如
data id=“contact”
和
document.querySelectorAll（'[data id=contact]
），然后在结果集中迭代每个下拉列表并应用选项。