динамический выбор в JS

Question

У меня есть дата SELECT/OPTION, созданная JS.

Код работает нормально, но когда этот файл отправляется на другую страницу. SELECT не сохранил значение, когда я нажимаю кнопку «Назад» из браузера или когда я отправляю его обратно. День и год становятся пустыми. Скопируйте код и попробуйте его в своем браузере, вы поймете, что я имею в виду.

Любое предложение?

<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

Вопрос заключается в HTML в течение дня и года генерируется динамически, так что значение последнего выбранного индекса не может быть введен в отдельные коробки (поскольку выберите коробки не были сделаны еще) ,

У меня есть два предложения:

1) Я бы не заполнять каждый вариант выбора динамически. Возможно, в DOM есть 3 блока выбора для каждого из трех разных типов дневных выборов (30 дней, 31 день и февраль). JavaScript, который выполняется при выборе месяца, не заселяет в поле выбора, но показывает соответствующие поля выбора в течение нескольких дней и скрывает два других. По умолчанию все они будут скрыты. Затем вы повторите что-то подобное для окна выбора года.

2) Если вы должны динамически генерировать ваш контент, я бы попытался сохранить выбранный индекс в локальном хранилище (или что-то еще, что щекочет ваше воображение). Например, если кто-то выбирает 23 января 2012 года .. сохраните это в локальном хранилище. Это может выглядеть примерно так:

localStorage['dateSelect'] = '01|23|2012'; 

Это просто пример того, что вы могли бы сделать. Затем вы можете прочитать его при загрузке страницы.

var selectedMonth; 
var selectedDay; 
var selectedYear; 
if (localStorage['dateSelect']) { 
    var storage = localStorage['dateSelect'].split('|'); 
    selectedMonth = storage[0]; 
    selectedDay = storage[1]; 
    selectedYear = storage[2]; 
} 

Позвольте мне знать, если вам нужна дополнительная помощь :)

удачи! -Graham