Javascript 如何在单击按钮时动态填充下拉字段

我需要一些关于如何填充基于数组长度动态创建的下拉列表的帮助。如果长度为4，则需要填充所有4个创建的下拉选项

这是我的html代码

<div class="col-md-2">
        <button type="button" class="addBtn">
    </div>
<div class="form-control" id="bookTemplate">
        <div class="col-md-2">
            <select class="myPopulatedValueElements">
                <option value="Volvo">Volvo</option>
                <option value="Merc">Merc</option>
            </select>
        </div>
    </div>

沃尔沃汽车
美塞苔丝

我的Javascript看起来像这样

var myCars = [
    "Jaguar",
    "Limo", 
    "BMW", 
    "Ford Mustang",
     "Audi"
     ];

    for (var i = 0; <myCars.length; i++) {
        $(".addBtn").click()
    }
    $('.myPopulatedValueElements').each(function(index){
        var carCounter = 0;
        var optionCounter = 0;
        $(this).find('option').each(function(){
            if($(this)[optionCounter] == myCars[carCounter]){
                $(this)[optionCounter].attr('selected', 'selected')
                carCounter ++
            }else{
                optionCounter++
            }

        });
    });

var myCars=[
“捷豹”，
“豪华轿车”，
“宝马”，
“福特野马”，
“奥迪”
];
对于（var i=0；让我们从两个无效语法点开始：


你在
之前缺少了
i
，这让你有点困惑。查看标记，你只有一个选择。查看你的逻辑，你点击addBtn的次数与你的数组中有车的次数相同，但似乎没有任何与点击事件相关联的逻辑，因此它是unclear为什么要这样做。你能重写这部分吗？我不太清楚：“它会根据数组长度添加新的下拉字段，但不会在每个添加的字段上填充数组元素。”@Taplar bookTemplate是表单的一个隐藏部分，在单击按钮时会显示下拉列表，这些只是占位符之类的东西。因此，逻辑与数组的长度有关，我希望类似于Jaguar Limoetc@Adriano它确实增加了新的dropdown字段在循环使用我的for循环后，每次循环都会添加一个下拉字段，直到达到五个。我的问题是它没有在字段中填充数组元素。你是说你正在创建包含单个选项的select元素吗？更像这样，但问题是，它是在添加相同的下拉字段，而不是每次单击按钮时都创建一个新的下拉列表，如此Jaguar Limo BMW