dynamic selection option in JS - php

Question

I have a date SELECT/OPTION create by JS.
The code works fine, but when this file post to different page. The SELECT didn't retain the value when I click back button from browser or when I post it back. The day and year become blank. Copy the code and try it in your browser you will understand what I mean.
Any suggestion?
<script>
function populate(s1, s2){
var s1=document.getElementById(s1);
var s2=document.getElementById(s2);
s2.innerHTML="";
if(s1.value==""){
var optionArray=['|Day'];
}
else if(s1.value=="01" || s1.value=="03" || s1.value=="05" || s1.value=="07" || s1.value=="08" || s1.value=="10" || s1.value=="12"){
var optionArray=['|Day'<?PHP for($d=1; $d<32; $d++){echo ", '$d|$d'";}?>];
}
else if(s1.value=="04" || s1.value=="06" || s1.value=="09" || s1.value=="11"){
var optionArray=['|Day'<?PHP for($d=1; $d<31; $d++){echo ", '$d|$d'";};?>];
}
else if(s1.value=="02"){
var optionArray=['|Day'<?PHP for($d=1; $d<30; $d++){echo ", '$d|$d'";};?>];
}
for(var option in optionArray){
var pair=optionArray[option].split("|");
var newOption=document.createElement("option");
newOption.value=pair[0];
newOption.innerHTML=pair[1];
s2.options.add(newOption);
}
}
function populate_year(s2, s3){
var s2=document.getElementById(s2);
var s3=document.getElementById(s3);
s3.innerHTML="";
if(s2.value==""){
var optionArray=['|Year'];
}
else if(s2.value=="29"){
var optionArray=['|Year'<?PHP for($y=1936; $y<2013; $y=$y+4){echo ", '$y|$y'";};?>];
}
else if(s2.value!=="29"){
var optionArray=['|Year'<?PHP for($y=1933; $y<2013; $y++){echo ", '$y|$y'";};?>];
}
for(var option in optionArray){
var pair=optionArray[option].split("|");
var newOption=document.createElement("option");
newOption.value=pair[0];
newOption.innerHTML=pair[1];
s3.options.add(newOption);
}
}
</script>
<select id="s1" onchange="populate(this.id, 's2')" name="month" style="width:80px; font-family:arial;">
<option value="">Month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="s2" onchange="populate_year(this.id, 's3')" name="day" style="width:65px; font-family:arial;">
<option value="">Day</option>
</select>
<select id="s3" name="Year" style="width:80px; font-family:arial;">
<option value="">Year</option>
</select>

Answer 1

The issue is the html for the day and year are dynamically generated, so the value of the last selected index can't be injected into the select boxes (because the select boxes haven't been made yet).
I have two suggestions:
1) I wouldn't populate each select option dynamically. Perhaps have 3 select boxes in the DOM for each of the three different types of day selections (30 days, 31 days, and for February). The JavaScript that executes when selecting a month doesn't populate the select box, but shows the appropriate select box for days and hides the other two. By default, they would all be hidden. You would then repeat something similar for the year select box.
2) If you must dynamically generate your content, I would attempt storing the selected index in Local Storage (or whatever other means tickles your fancy). For example, if someone selects January, 23, 2012.. store this in Local Storage. This could look something like this:
localStorage['dateSelect'] = '01|23|2012';
This is just an example of what you could do. Then, you could read from it upon page load.
var selectedMonth;
var selectedDay;
var selectedYear;
if (localStorage['dateSelect']) {
var storage = localStorage['dateSelect'].split('|');
selectedMonth = storage[0];
selectedDay = storage[1];
selectedYear = storage[2];
}
Let me know if you need any more help :)
Good luck!
-Graham