2

我有一个由 JS 创建的日期 SELECT/OPTION。

代码工作正常，但是当这个文件发布到不同的页面时。当我从浏览器单击后退按钮或将其发回时，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>
4

1 回答 1

0

问题是日期和年份的html是动态生成的，因此最后选择的索引的值无法注入选择框（因为尚未制作选择框）。

我有两个建议：

1）我不会动态填充每个选择选项。对于三种不同类型的日期选择（30 天、31 天和二月）中的每一种，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];
}

如果您需要更多帮助，请告诉我 :)

祝你好运！-格雷厄姆

于 2013-04-03T14:29:26.017 回答