HTML | DOM 数据列表对象

DOM Datalist 对象用于表示 HTML

属性：它有一个“选项”属性，用于返回数据列表中所有选项值的集合。

句法：

document.getElementById("gfg"); 

其中“gfg”是分配给“Datalist”标签的 ID。

示例 1：

  

    
        
          GeeksForGeeks
        
        
        DOM Datalist object
    
    
        Your Cars Name: 
        
        
            
            
            
            
            
        
    
    
    
    Submit
  
    
  
    
        function myGeeks() {
            var g = 
            document.getElementById("gfg").options.length;
            
            document.getElementById("sudo").innerHTML = 
              "There are " + g + " options in the list.";
        }
    

  

  

输出：

点击按钮前：

点击按钮后：

示例 2：

  

    
        
          GeeksForGeeks
        
  
        DOM Datalist object
  
        
            Your cars name:
        
        
  
        Submit
  
        
            function myGeeks() {
                var g = document.createElement("INPUT");
                g.setAttribute("list", "cars");
                document.getElementById("GFG").appendChild(g);
  
                var f = document.createElement("DATALIST");
                f.setAttribute("id", "cars");
                document.getElementById("GFG").appendChild(f);
  
                var w = document.createElement("OPTION");
                w.setAttribute("value", "BMW");
                document.getElementById("cars").appendChild(w);
  
                var x = document.createElement("OPTION");
                x.setAttribute("value", "Mercedes");
                document.getElementById("cars").appendChild(x);
            }
        
    
  

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM Datalist Object支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器