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.
Visitors Rating
Your Rating




Google+
More on List Box & JavaScript
yraml

04-12-2016

how to get data-id in option like these ?

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer