如何使用 JavaScript 创建带有数组值的下拉列表？

任务是将元素添加到 JavaScript 数组中的 select 元素。我们还可以使用 JavaScript 在下拉列表中获取选定的值。在这里，我们将使用数组填充下拉列表。下面是 JavaScript 中使用的 populer 方法的描述。

示例 1：在此示例中，长度属性用于遍历数组的元素，并在每个元素上创建一个选项元素，并通过 appendChild() 方法将此新元素附加到选择元素。

• 程序：

    
  
      
          Populate dropdown list
          with array values
      
  
    
  
        
       
          GeeksforGeeks 
      
        
      
      
        
      
        
      
        
      
          click here
      
        
      
      
        
      
          var up = document.getElementById('geeks');
          var down = document.getElementById('gfg');
          var select = document.getElementById("arr");
          var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
          up.innerHTML = "Click on the button to "
                      + "perform the operation"+
                      ".<br>Array - [" + elmts + "]";
    
          // Main function
          function GFG_Fun() {
              for (var i = 0; i < elmts.length; i++) {
                  var optn = elmts[i];
                  var el = document.createElement("option");
                  el.textContent = optn;
                  el.value = optn;
                  select.appendChild(el);
              }
              down.innerHTML = "Elements Added";
          }
      
  
    

• 输出：
  

示例 2：在此示例中， each() 方法用于遍历数组的元素，并在每个元素上创建一个option 元素，并通过 JQuery 中的append() 方法将此新元素附加到 select 元素。

• 程序：

    
  
      
          Populate dropdown list
          with array values
      
        
       
      
  
    
  
        
       
          GeeksforGeeks 
      
        
      
      
        
      
        
      
        
      
          click here
      
        
      
      
        
      
          var up = document.getElementById('geeks');
          var down = document.getElementById('gfg');
          var select = document.getElementById("arr");
          var elmts = ["HTML", "CSS", "JS", "PHP", "jQuery"];
          up.innerHTML = "Click on the button to "
                  + "perform the operation"+
                  ".<br>Array - [" + elmts + "]";
    
          // Main function
          function GFG_Fun() {
              $.each(elmts, function(i, p) {
                  $('#arr').append($('<option></option>')
                              .val(p).html(p));
              });
              down.innerHTML = "Elements Added";
          }
      
  
    

• 输出：