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）我不会动态填充每个选择选项。对于三种不同类型的日期选择（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

JS中的动态选择选项

1 个答案: