Inserting options from an array to a datalist using JavaScript

Adding options to a datalist.

We will prepare a datalist without any option – value added to it.

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

We will use one array to store months of a year and then add them as option to the datalist. We will loop through all the elements of the array and prepare the format to store the options in a string variable by using all elements.

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
}

Then we will assign this string variable to the datalist by using innnerHTML property.

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

Each element of our array will be added as option values of the datalist.

The output is here .

Full code is here

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

Output will be 12

Displaying particular option value.

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

Output will be June ( Note : options[0].value is January )

Adding options from MySQL table.

Here we have seen how to add options to a datalist by using client side JavaScript. We can populate options of a datalist by taking data from database table by using PHP and Ajax.

More on JavaScript form Validation

Javascript Form Validation

Email Validation

Disabling the submit button till all the elements of the form are validated

getElementById to access form elements with event handlers

Period button Validation of a form

disabling Period button by a checkbox
Checkbox

How to limit number of checkboxes allowed to be clicked inside a form

Checkbox Validation of a form

Displaying checked value of a check box array

disabling checkbox by button click

Enable or disable of a text box by a checkbox

All Checking & Un checking in a group of checkboxes by single button
ListBox:

Adding options to a drop down list box

Removing options from a drop down list box

Moving options from one drop down list box to other

Dynamic population of second list box based on value of first list box

Datalist adding options