Question

我有一天＆lt; SELECT＆gt;字段和一个月＆lt; SELECT＆gt;字段和日期＆lt; SELECT＆gt;应包含＆lt; OPTION＆gt;的月份天数。例如，如果我从月份选择四月＆lt; SELECT＆gt;当天＆lt; OPTION＆gt;的数量＆lt; SELECT＆gt;是30.我的问题是：如何添加＆lt; OPTION＆gt; ＆lt; SELECT＆gt;之间的字段和＆lt; / SELECT＆gt;？

这是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
    }
}

这是在＆lt; SELECT＆gt;之间添加选项的功能。和＆lt; / SELECT＆gt;当天＆lt; SELECT＆gt;字段：

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
    }
}

Answer 1

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

// 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

Answer 2

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

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();
}

在<select>和</select>之间添加选项字段

2 个答案: