Adding options to a datalist.

<input name="month" list="months" >
<datalist id="months" >
</datalist>

var str=''; // variable to store the options
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
for (var i=0; i < month.length;++i){
str += '<option value="'+month[i]+'" />'; // Storing options in variable
}

var my_list=document.getElementById("months");
my_list.innerHTML = str;

<input name="month" list="months" >
<datalist id="months" >
</datalist>

<script language="javascript">
var str=''; // variable to store the options
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December");
for (var i=0; i < month.length;++i){
str += '<option value="'+month[i]+'" />'; // Storing options in variable
}
var my_list=document.getElementById("months");
my_list.innerHTML = str;
</script>

Number of options available in a Datalist

var my_list=document.getElementById("months");

alert(my_list.options.length);

Displaying particular option value.

alert(my_list.options[5].value);

Example: Dynamically Populating datalist with JavaScript

<input list="cities" id="city" placeholder="Type city...">
<datalist id="cities"></datalist>

<script>
var cities = ['New York', 'Los Angeles', 'Chicago', 'Houston'];
var dataList = document.getElementById('cities');

cities.forEach(function(city) {
    var option = document.createElement('option');
    option.value = city;
    dataList.appendChild(option);
});
</script>

Example: Handling Form Submission with datalist

<form onsubmit="handleSubmit(event)">
    <input list="fruits" name="fruit" id="fruitInput">
    <datalist id="fruits">
        <option value="Apple">
        <option value="Banana">
        <option value="Orange">
    </datalist>
    <input type="submit" value="Submit">
</form>

<script>
function handleSubmit(e) {
    e.preventDefault();
    const selectedFruit = document.getElementById('fruitInput').value;
    if (['Apple', 'Banana', 'Orange'].includes(selectedFruit)) {
        alert("Valid fruit: " + selectedFruit);
    } else {
        alert("Invalid input");
    }
}
</script>

<input name="month" list="months" onchange='my_alert()'>

function my_alert()
{
alert('I am changed');
}