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

Question

我需要一些有关如何填充根据数组长度动态创建的下拉列表的帮助。如果长度为 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++
            }

        });
    });

发生的情况是，它根据数组长度添加新的下拉字段，但不会用数组元素填充每个添加的字段。请对我做错了什么有帮助吗？

Answer 1

让我们从两点无效语法开始:

• 您缺少 i之前<在你的for循环
• 您缺少 button 的文本和结束标记

现在假设您想要填充 <select>下拉菜单 <option>元素由您的 myCars 组成数组，你需要做的是:

• 删除现有的 <option>元素；您正在动态添加汽车，因此已经拥有一些汽车是没有意义的
• 循环 myCars数组，而不是 HTML <select>
• 对于每辆车，构建 <option>元素，添加 value属性和 text()与 cars 数组的索引相关
• 最后，您需要将所有内容移至函数中，并附加 onclick事件处理程序到您的按钮以启动您的功能。

这一切都可以从以下内容中看出:

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

function addCars() {
  $(".myPopulatedValueElements").html('');
  // ^ Optionally reset the `<select>` so that you don't get duplicates
  for (var i = 0; i < myCars.length; i++) {
    var $div = $("<option>", {
      value: myCars[i],
    }).text(myCars[i]);
    $(".myPopulatedValueElements").append($div);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">
  <button type="button" class="addBtn" onclick="addCars()">Button</button>
</div>
<div class="form-control" id="bookTemplate">
  <div class="col-md-2">
    <select class="myPopulatedValueElements">
    </select>
  </div>
</div>

希望这就是您正在寻找的!