HTML drop down menu using Javascript

Question

Im trying to make a html drop down menu, using JavaScript that uses a loop to insert options starting from a particular year and stopping at the current year. But I have been unsuccessful, the drop down menu is appearing but it has nothing in in

  <script language="JavaScript" type="text/javascript">
         function Year()
         {
             var Year = 1986
             var CurrentYear = new Date().getFullYear()

             while( Year < CurrentYear){
             {
                 Year++;
                 document.write("<option>" + Year + "</option>");
             }

         }

and here is the HTML

  <select id='ddYear'>
      <option selected disabled hidden label="Select An Option">

   <script language="JavaScript" type="text/javascript">
           Year();
   </script>

   </select>

Answer 1

You can add the following code inside while loop.

Year++;
var select = document.getElementById("ddYear");
var option = document.createElement('option');
option.text = option.value = Year;
select.add(option, 0);

Answer 2

You have an extra curly brace. I also would suggest a better naming:

     function buildOptions() {

         var year = 1986;
         var currentYear = new Date().getFullYear();

         while( year < currentYear) {
             year++;
             document.write("<option>" + year + "</option>");
         }

     }

and then the HTML:

<select id='ddYear'>
   <option selected disabled hidden label="Select An Option">

   <script language="JavaScript" type="text/javascript">
         buildOptions();
   </script>

</select>

Answer 3

Consider using jQuery instead of pure javascript. It will make your code much easier to read (ie avoid to insert a script element inside select code and allows you to update content runtime):

HTML

<select id='ddYear'>
    <option selected disabled hidden label="Select An Option"></option>
</select>

Jquery

var startYear = 1986;
var currentYear = (new Date).getFullYear();

for(var year=startYear; year<currentYear; year++)
{
  $('#ddYear').append($('<option/>', { 
     value: year,
     text : year 
  }));
}

Fiddle

Answer 4

your approach can be a little bit better in my humble opinion.

First of all, you can avoid using a script tag inside your html to call a function, because this can be done in your script directly.

In this working fiddle, by taking your HTML and javascript, we generate dates from 1986 INCLUDED until 2015 INCLUDED, in your previous script you were excluding these dates.

I've also added you a change event listener for future use, since you may want to know when the select dropdown is going to be changed.

Fiddle:

http://jsfiddle.net/briosheje/0Luq0fxf/

<-- Not needed if you want to run the snippet below.. However if you want to add some css / html for further immediate testing..

HTML :

<select id='ddYear'>
    <option selected disabled hidden label="Select An Option">
</select>

Javascript:

var ddYear = document.getElementById('ddYear');

var y = 1986;
var currYear = new Date().getFullYear();

while ( y <= currYear ) {
    var newOption = document.createElement('option');
    newOption.text = newOption.value = y;
    y++;
    ddYear.add(newOption);
}

ddYear.addEventListener('change',function() {
   alert(this.value);
});

Snippet:

 var ddYear = document.getElementById('ddYear'); var y = 1986; var currYear = new Date().getFullYear(); while ( y <= currYear ) { var newOption = document.createElement('option'); newOption.text = newOption.value = y; y++; ddYear.add(newOption); } ddYear.addEventListener('change',function() { alert(this.value); }); 

 <select id='ddYear'> <option selected disabled hidden label="Select An Option"> </select>