how to populate year values in dropdownlist using javascript

Question

i need to populate year in second dropdownlist on selecting value from first dropdown.And the year range is between 1900 to 2050

can anyone help?

Answer 1

First, create a select element. So in your HTML document,

<select id="year">
    <option value="-1">&nbsp;</option>
</select>

There is an empty option if the user doesn't want to fill it in. Feel free to give it an another value or another text like "please choose a year". The reason behind it is that if the user has disabled javascript, the years won't be appended. You will end with an empty select box.

Then use a script to add more option elements to fill it with years.

// get selectbox
var selectBox = document.getElementById('year');
// loop through years
for (var i = 2050; i >= 1900; i--) {
    // create option element
    var option = document.createElement('option');
    // add value and text name
    option.value = i;
    option.innerHTML = i;
    // add the option element to the selectbox
    selectBox.appendChild(option);
}

Please ensure that the parameter at getElementById has the same id as the HTML select element.

Answer 2

A needless One Liner: (DEMO)

$((new Array(150) + "").split(",").map(function (i,j) {return $("<option>").append(j + 1900)[0];})).appendTo($("select"));

Expanded:

var option = function (i,j) {return $("<option>").append(j + 1900);};

var options = (new Array(150) + "").split(",").map(option);

$("select").append(options);

Answer 3

I have created jsfiddle Please look I have attached change event to first combo box and according to its value populating 2nd combo value. You can do whatever you want inside function

$("#s1").on("change", function(){
var value = $(":selected", this).val();
if(value == 'a'){
    $("#s2").val('2000');
 }else{
    $("#s2").val('2010');
 }

})

Answer 4

Just create a for loop that starts at 1900 and ends at 2050 (or the other side), and append options to the dropdownlist:

<select id="myDDL"></select>

var i=0;
for(i=1900;i<=2500;i++)
{
    $("#myDDL").append("<option value='"+i+"'>"+i+"</option>")
}