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

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

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

• 程序：

HTML

  

    
        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 元素。

• 程序：

HTML

  

    
        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";
        }
    

  

• 输出：

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。