JS中的動態選擇選項

我有一個由JS創建的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>

來源

2013-04-03 chien pin wang

的問題是動態生成的日和年的HTML，所以最後選擇的索引的價值不能被注入到選擇框（因爲選擇框沒有尚未作出）。

我有兩個建議：

1）我不會動態填充每個選擇選項。對於三種不同類型的日期選擇（30天，31天和2月），DOM中可能有3個選擇框。選擇月份時執行的JavaScript不會填充選擇框，但顯示適當的選擇框爲天和隱藏其他兩個。默認情況下，它們都將被隱藏。然後你會重複類似的年份選擇框。

2）如果您必須動態生成的內容，我會嘗試存儲本地存儲（或任何其他方式逗你的幻想）選定的指數。例如，如果某人選擇2012年1月23日，將其存儲在本地存儲中。這可能看起來像這樣：

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

來源

2013-04-03 14:29:26

JS中的動態選擇選項

回答

相關問題