Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Datalist Object
  • Last Updated : 22 Jan, 2019

The DOM Datalist Object is used to represent the HTML <Datalist> element. The Datalist element is accessed by getElementById().

Properties: It has a ‘Option’ attribute which is used to return the collection of all options value in a datalist.

Syntax:

document.getElementById("gfg"); 

Where “gfg” is the ID assigned to the “Datalist” Tag.

Example-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>

Output:

Before Clicking On Button:

After Clicking On Button:

Example-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>

Output:

Before Clicking On Button:

After clicking On Button:

Supported Browsers: The browser supported by DOM Datalist Object are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :