0

I have the following javascript code which displays current day, month and year in the dropdown. The code is as follows:

var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December'];

function populatedropdown(dayfield, monthfield, yearfield) {
   var today=new Date()
   var dayfield=document.getElementById(dayfield)
   var monthfield=document.getElementById(monthfield)
   var yearfield=document.getElementById(yearfield)
   for (var i=0; i<31; i++) {
      dayfield.options[i]=new Option(i+1)
   }
   dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
   for (var m=0; m<12; m++) {
      monthfield.options[m]=new Option(monthtext[m], monthtext[m])
   }
   monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
   var thisyear=today.getFullYear()
   for (var y = 0; y < 100; y++) {
       yearfield.options[y] = new Option(thisyear, thisyear)
       thisyear -= 1
   }
   yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>



 <select id="daydropdown" name="D-DOB"></select>  
   <select id="monthdropdown" name="M-DOB"></select>
   <select id="yeardropdown" name="Y-DOB"></select>

I wish to display "Select Day", "Select Month" and "Select Year" as default values in place of current values like:

<option value="">Select Day</option>

Fiddle: https://jsfiddle.net/u2m243qf/1/

EDIT:

Resolved by myself:

I have restructured my code and arrived at a simpler solution. New Fiddle at: https://jsfiddle.net/u2m243qf/9/

user3790186
  • 239
  • 6
  • 21

1 Answers1

0

If I understood your request you want to display a default value in your options? If so, just do:

<option value="x" selected="your-selected"> Select day </option>

You can also find a deeper discussion on the topic here: How can I set the default value for an HTML <select> element?

... and in JS it is: 

dayfield.value = "Select Day";
Community
  • 1
  • 1
Paul
  • 478
  • 2
  • 16
  • sorry, i am not talking about plain html...In above javascript... dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day – user3790186 May 03 '16 at 14:40
  • Well, in plain JS: dayfield.value = "Select Day"; – Paul May 03 '16 at 14:42
  • fiddle updated..: https://jsfiddle.net/u2m243qf/1/ I need to display: as first value in date column ?? – user3790186 May 03 '16 at 15:06
  • Here is your answer: https://jsfiddle.net/u2m243qf/8/ Be warned thought! Your code is absolutely terrible. Do the W3C Javascript tutorials, and start reading about how to treat the DOM and writing logical code. Even thought JS is a weak-type language troubleshooting and issue-finding will go 100% quicker if you learn some basic standards. – Paul May 03 '16 at 15:33
  • Thanks. I resolved it myself. I have arrived at a more simpler solution Original post updated with new fiddle. – user3790186 May 03 '16 at 16:10