1

我有一个天 <SELECT> 字段和一个月份 <SELECT> 字段，并且天 <SELECT> 应该包含当月的 <OPTION> 天数。例如，如果我从月份 <SELECT> 选择四月，则 <SELECT> 日的 <OPTION> 数量为 30。我的问题是：如何在 <SELECT> 和 </SELECT> 之间添加 <OPTION> 字段?

这是 HTML 代码：

<div class="input">
    <label>Date de naissance</label>
    <br>
    <select name="jour"></select>
    <select name="mois" onchange="ajouterJours(this.options[this.selectedIndex].text);"></select>
    <input type="number" name="annee">
</div>

这是我到目前为止创建的 JS 脚本：

他是在页面加载时起作用的功能：

function main()
{
    var i = 0;
    var moisSelect = form.mois;
    while (i<12)
    {
        i++;
        moisSelect // here I cant figure out what to do with the month SELECT to add options
    }
}

这是在 <SELECT> 和 </SELECT> 之间为日期 <SELECT> 字段添加选项的函数：

function ajouterJours(mois)
{
    var mois = 0;
    var jourSelect = form.jour;
    switch(mois)
    {
        case 1,3,5,7,8,10,12:
            mois = 31;
            break;
        case 2:
            mois = 29;
            break;
        case 4,6,9,11:
            mois = 30;
    }
    var i = 0;
    while (i<m)
    {
        i++;
        jourSelect  // here I cant figure out what to do with the day SELECT to add options
    }
}
4

2 回答 2

0

将一个元素添加为另一个元素的子元素的通用代码如下所示：

// i assume this has already been done
var select = <get your select element here>;
...

var option = document.createElement('option');
option.value = "the value";
option.appendChild(document.createTextNode('The Label'));
select.appendChild(option);

删除一个的代码很简单；实际上，要删除最后一个，这是微不足道的。

select.removeChild(select.lastChild);

我能想到的最简单的代码来确定一个月中的天数（同时适当考虑闰年）：

function daysInMonth(month, year) {
    if (!month) month = (new Date()).getFullYear();
    var lastDay = new Date(Date.UTC(year, month % 12, 1) - 1);
    return lastDay.getDate();
}

所以现在，考虑问题。当月份发生变化时，您希望使选项数与该月的天数相匹配。在伪代码中：

on month change:
    newNumberOfDays = daysInMonth(selected month, selected year)
    while current number of options =/= newNumberOfDays:
        if newNumberOfDays > current number of options
            add an option for (current number of options) + 1
        else
            remove the last option
于 2013-03-15T18:17:54.573 回答
0

您可以像这样将新的选项元素添加到选择中：

select.options[index] = new Option(text, value);

length您也可以通过将属性设置为来清除选择0

这是您的问题的一个工作示例：http: //jsfiddle.net/inti/KTJMA/

HTML

<select name="mois"></select>
<select name="jour"></select>

JS

var select_mois = document.getElementsByName("mois")[0];
var select_jour = document.getElementsByName("jour")[0];

select_mois.length = 0;
for (var m=0; m<12; m++) {
    select_mois.options[m] = new Option(m+1, m+1);
}
select_mois.onchange = function() {
    var val = this.options[this.selectedIndex].value
    addJour(val);
}
select_mois.onchange();

function addJour(m) {
    var days = daysInMonth(m, (new Date()).getFullYear())
    select_jour.length = 0;
    for (var j=0;j<days;j++) {
        select_jour.options[j] = new Option(j+1, j+1);
    }
}

function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}
于 2013-03-15T18:35:25.563 回答