javascript - 如何通过 JavaScript 动态添加下拉值？

Question

我从 API 获取值，现在我想将这些值添加到下拉列表中。我尝试过这种方式：我的 HTML：

    <div class="job-filter-dropdown same-pad location">
                                <select class="selectpicker" id="location">
                                    <option value="" selected>Location</option>

                                </select>
                            </div>

我从我试图添加价值的地方编写了函数，即：

   function loadLoc(data){
                len = data.length;
                console.log(data);
                for(x=0;x<len;x++){
                         $('#location').append('<option value="california">'+data[x].name+'</option>');
                          }
                       }

我做错了什么:(

标签： javascriptdrop-down-menuappendappendchild

Answer 1

你的代码很好。我已经更新了，所以试试这个：link

HTML

<div class="job-filter-dropdown same-pad location">
  <select class="selectpicker" id="location">
    <option value="" selected>Location</option>
  </select>
</div>

JS：

  function loadLoc(data) {
    len = data.length

    console.log(data)

    for(let item of data) {
      $('#location').append(`<option value="california">${ item.name }</option>`)
    }

  }

const list = [
  { name: 'California' },
  { name: "Russia" },
  { name: "Israel" }
]

window.onload = () => {
  loadLoc(list)
}