javascript - 从 JavaScript 变量为下拉选项赋值？

Question

我有一个包含四个选项的下拉菜单。我想从 javascript 为下拉列表分配值。

                <select class="dropwdown-test" id="dropTest"> 
                    <option>Person 1</option>
                    <option>Person 2</option>
                    <option>Person 3</option>
                    <option>Person 4</option>
                  </select>

这四个变量需要分配给 function() 或 function(response) 中的 option 值。

                    var p1 = 'john'
                    var p2 = 'marcus'
                    var p3 = 'anthony'
                    var p4 = 'aaron'

Answer 1

您可以执行如下操作:

document.addEventListener('DOMContentLoaded', (event) => {      // on DOM loaded
  var p1 = 'john';
  var p2 = 'marcus';
  var p3 = 'anthony';
  var p4 = 'aaron';
  
  var list = [p1, p2, p3, p4];    // put the variables in a list
  
  var select =  document.getElementById("dropTest");     // get the select
  var options = select.querySelectorAll("option");       // get it's options
  
  options.forEach(function(el, i) {
    if(list[i]) {              // if list has element list[i]
      el.value = list[i];      // assign option value to list[i]
      // commenting out because OP wants only values assigned and not innerHTML
      // el.innerHTML = list[i];  // assign option innerHTML to list[i]
    }
  });
})

<select class="dropwdown-test" id="dropTest"> 
  <option>Person 1</option>
  <option>Person 2</option>
  <option>Person 3</option>
  <option>Person 4</option>
</select>