Skip to content
Related Articles

Related Articles

HTML | DOM Datalist Object

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 24 Jan, 2022

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

Collections 

options: It is used to return the number of options in a <datalist> element. 
Where “gfg” is the ID assigned to the “Datalist” Tag.
Example-1: 
 

html




<!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: 
 

html




<!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 :

Start Your Coding Journey Now!