We are going to learn how we can automatically populate a data set to view in a select element in HTML using javascript. As an example we will populate set of years, months and dates inside of select element which can be used to input a particular birthday in a HTML form.
<script language="javascript">
function loadYears(){
var sel = document.getElementById('year');
// 'new Date().getFullYear()' is used to get current year.
for(var i = 1950; i <= new Date().getFullYear(); i++) {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.value = i;
sel.appendChild(opt);
}
}
function loadDays(){
document.getElementById('day').innerHTML = ""; //initially clears the data items which were included by the previous function invokes.
var sel = document.getElementById('day');
// if/else set is to decide the number of days for a particular month.
if(document.getElementById('month').value!='February' && document.getElementById('month').value!='April' && document.getElementById('month').value!='June' && document.getElementById('month').value!='August' && document.getElementById('month').value!='November' && document.getElementById('month').value!='September'){
for(var i = 1; i < 32; i++) {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.value = i;
sel.appendChild(opt);
}
}else{
for(var i = 1; i < 31; i++) {
var opt = document.createElement('option');
opt.innerHTML = i;
opt.value = i;
sel.appendChild(opt);
}
}
}
function loadMonths(){
//JavaScript array to store the names of the months
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var sel = document.getElementById('month');
for(var i = 0; i < months.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = months[i];
opt.value = months[i];
sel.appendChild(opt);
}
}
</script>
<body onload="loadYears();loadMonths()"> <!-- According to my logic Year and month generation functions should be invoked at the body onload event -->
<!-- Following are the particular select elements on the html page -->
<select id="year" name="year"></select>
<select id="month" name="month" onclick="loadDays()"> </select><!-- According to my logic days should be loaded at the time of choosing the month. So I invoked that function by the event of onclick here. -->
<select id="day" name="day"></select>
No comments:
Post a Comment