<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.
<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>
var my_list=document.getElementById("months");
alert(my_list.options.length);
Output will be 12
alert(my_list.options[5].value);
Output will be June ( Note : options[0].value is January )
<input name="month" list="months" onchange='my_alert()'>
function my_alert()
{
alert('I am changed');
}
yraml | 04-12-2016 |
how to get data-id in option like these ? |
23-08-2021 | |
how to get data-id in option like these ? i am triyng make input with data-* attribute for insert to my db values from table (users) |
17-08-2022 | |
I m trying to populate datalist dynamically with Ajax call. all the options gets populated when i check in source code. But actually UI shows only first option in datalist dropdown. Why is this? |