当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。