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()
最后，您需要将所有内容移动到一个函数中，并将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>

希望这就是你要找的东西！

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

1 个答案: