HTML | DOM Datalist Object
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
Please Login to comment...