循环遍历对象并使用选项和值填充Select元素

Looping Over An Object And Populating A Select Element With Options and Values

本文关键字：填充 Select 元素 选项 遍历 对象 循环      更新时间：2023-09-26

我试图用基于给定配置对象的值的选项填充下面代码中的'#shuttle-dst'(用于班车目的地)选择元素。这段代码做了我想要它做的事情，首先清除先前存在的选项的select元素，然后循环遍历configs对象的分配属性，并将name属性的值打印到控制台。在这个例子中，在这个特定的配置中有五个属性:

Admin User
MPR User
SAMHSA User
States User
All States User

但是这段代码没有用所有五个分配的值填充select元素，只填充了最后一个——' all States User'。为什么?

function loadConfigurations(configs){
   $('#shuttle-dst').empty();
   for(var i=0; i < configs.assigned.length; i++){
    var item = configs.assigned[i];
    console.log(item.name);
        $.each(item, function(){
          $('#shuttle-dst').html('<option value="' + item.value + '">' + item.name + '</option>');
        });
   }
}

首先，您不需要调用$.each()，因为您已经在每个条目的for循环中。

要解决您的问题，您应该在#shuttle-dst元素上使用append()而不是html() (append()向调用者元素添加新元素，html()替换调用者元素的html)。

例如:

function loadConfigurations(configs) {
    $('#shuttle-dst').empty();
    for (var i=0; i < configs.assigned.length; i++) {
        var item = configs.assigned[i];
        $('#shuttle-dst').append(
            '<option value="' + item.value + '">' + item.name + '</option>'
        );
    }
}
相关文章：