Question

我希望用户使用三个选择菜单输入生日。当用户输入其出生月份时，“天”菜单中的选项应更改为适合该月（1月为31天，4月为30天）。我当前的解决方案包括使用拆分数组的“ for”循环创建新的预定义选项元素。当前，当我从下拉菜单中选择“一月”时，网页没有任何变化。

<script type = "text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == 'january'{
var optionArray = ["|", "1|1", "2|2", "3|3", "4|4", "5|5", "6|6", "7|7", "8|8", "9|9", "10|10","11|11", "12|12", "13|13", "14|14", "15|15", "16|16", "17|17", "18|18", "19|19", "20|20", "21|21", "22|22", "23|23", "24|24", "25|25", "26|26", "27|27", "28|28", "29|29","30|30", "31|31"];
}else{
}
for(option in optionArray){
var pair = 'optionArray.split['|'];
var newOption = dcoument.createElement('option');
newOption.value = pair[0];
newOption.innerHTML = pair[1]; 
s2.options.add(newOption);
}
</script>
</head>
<body>
Date of Birth<select id = 'slct1' name = 'slct1' 
onchange="populate(this.id,'slct2')">
                <option value = ""></option>
                <option value = 'january'>January</option>
<select id = 'slct2' name='slct2'></select>

我不确定从这里去哪里，任何帮助将不胜感激！

Answer 1

这里是解决您的问题的简单方法。我稍微修改了代码。该解决方案使用纯JavaScript。声明函数后，我只运行了函数以进行初始化。为此，必须存在第二个选择标签。因此，请确保将脚本放在body标签的末尾。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    Date of Birth<select id='slct1' name='slct1' onchange="populate()">
                <option value="January">January</option>
                <option value="February">February</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="August">August</option>
                <option value="September">September</option>
                <option value="October">October</option>
                <option value="November">November</option>
                <option value="December">December</option>
                </select>
    <select id='slct2' name='slct2'></select>

    <script type="text/javascript">
        var daysInMonth = {
            "January": 31,
            "February": 28,
            "March": 31,
            "April": 30,
            "May": 31,
            "June": 30,
            "July": 31,
            "August": 31,
            "September": 30,
            "October": 31,
            "November": 30,
            "December": 31
        };

        function populate() {
            var s1 = document.getElementById('slct1');
            var s2 = document.getElementById('slct2');
            s2.innerHTML = "";
            for (var i = 0; i < daysInMonth[s1.value]; i++) {
                var option = document.createElement("option");
                option.text = i + 1;
                s2.add(option);
            }

        }
        populate(); // init
    </script>
</body>

</html>

使用JavaScript更改HTML select元素中的选项

1 个答案: