HTML DOM Datalist用法及代码示例

DOM数据列表对象用于表示HTML <Datalist>元素。数据列表元素由getElementById()访问。

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

用法：

document.getElementById("gfg");

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

示例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:39px;"> 
          GeeksForGeeks 
        </h1> 
        
        <h2>DOM Datalist object</h2> 
    
    <form> 
        <label>Your Cars Name:</label> 
        <input list="gfg"> 
        <datalist id="cars"> 
            <option value="BMW" /> 
            <option value="Bentley" /> 
            <option value="Mercedes" /> 
            <option value="Audi" /> 
            <option value="Volkswagen" /> 
        </datalist> 
    </form> 
    
    <br> 
    <button onclick="myGeeks()">Submit</button> 
  
    <p id="sudo"></p> 
  
    <script> 
        function myGeeks() { 
            var g =  
            document.getElementById("gfg").options.length; 
            
            document.getElementById("sudo").innerHTML =  
              "There are " + g + " options in the list."; 
        } 
    </script> 
</center> 
  
</body> 
  
</html>

输出：

在单击按钮之前：

单击按钮后：

示例-2：

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:39px;"> 
          GeeksForGeeks 
        </h1> 
  
        <h2>DOM Datalist object</h2> 
  
        <form id="GFG"> 
            <b><label>Your cars name:</label></b> 
        </form> 
        <br> 
  
        <button onclick="myGeeks()">Submit</button> 
  
        <script> 
            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); 
            } 
        </script> 
    </center> 
  
</body> 
  
</html>

输出：

在单击按钮之前：

单击“打开”按钮后：

支持的浏览器：下面列出了DOM Datalist Object支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Datalist Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。