1

日<SELECT>フィールドと月<SELECT>フィールドがあり、日<SELECT>には月の日数<OPTION>が含まれている必要があります。たとえば、月<SELECT>から4月を選択した場合、その日の<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 に新しいオプション要素を追加できます。

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 に答える