（20分）用js实现 动态生成日子选择下拉框

<html>
<body>
<select id="SelectYear"></select>年
<select id="SelectMonth"></select>月
<select id="SelectDay"></select>日
</body>
<script type="text/javascript">
var selectYear = $("SelectYear");
var selectMonth = $("SelectMonth");
var selectDay = $("SelectDay");function $(id) { return document.getElementById(id); }
function appendOption(select, text, value)
{
var result = document.createElement("option");
result.text = text;
result.value = value;
select.options.add(result);
return result;
}
function updateSelectDay()
{
var year = selectYear.options[selectYear.selectedIndex].value;
var month = selectMonth.options[selectMonth.selectedIndex].value;
var date= new Date(year, month, 0);
var day = date.getDate();
for (var i = selectDay.options.length - 1; i >= day; i--)
selectDay.options.remove(i);
for (var i = 1; i <= day; i ++)
if (i > selectDay.options.length)
appendOption(selectDay, i, i);
}//初始化
selectYear.onchange = function()
{
updateSelectDay();
}
selectMonth.onchange = function()
{
updateSelectDay();
}var today = new Date();
for (var i = 1970; i <= 2070; i++)
{
appendOption(selectYear, i, i);
if (i == today.getYear()) selectYear.selectedIndex = selectYear.options.length - 1;
}
for (var i = 1; i <= 12; i++)
{
appendOption(selectMonth, i, i);
if (i == today.getMonth()) selectMonth.selectedIndex = selectMonth.options.length - 1;
}
updateSelectDay()
selectDay.selectedIndex = today.getDate() - 1;
</script>
</html>

解决方案 »

  1.   

    调整了一下兼容性，这个在ff下也能使用
    <html>
    <body>
    <select id="SelectYear"></select>年
    <select id="SelectMonth"></select>月
    <select id="SelectDay"></select>日
    </body>
    <script type="text/javascript">
    var selectYear = $("SelectYear");
    var selectMonth = $("SelectMonth");
    var selectDay = $("SelectDay");function $(id) { return document.getElementById(id); }
    function appendOption(select, text, value)
    {
    var result = document.createElement("option");
    result.text = text;
    result.value = value;
    select.options.add(result);
    return result;
    }
    function updateSelectDay()
    {
    var year = selectYear.options[selectYear.selectedIndex].value;
    var month = selectMonth.options[selectMonth.selectedIndex].value;
    var date= new Date(year, month, 0);
    var day = date.getDate();
    for (var i = selectDay.options.length - 1; i >= day; i--)
    if (selectDay.remove) selectDay.remove(i)
    else selectDay.options.remove(i);
    for (var i = 1; i <= day; i ++)
    if (i > selectDay.options.length)
    appendOption(selectDay, i, i);
    }//初始化
    selectYear.onchange = function()
    {
    updateSelectDay();
    }
    selectMonth.onchange = function()
    {
    updateSelectDay();
    }var today = new Date();
    for (var i = 1970; i <= 2070; i++)
    {
    appendOption(selectYear, i, i);
    if (i == today.getFullYear()) selectYear.selectedIndex = selectYear.options.length - 1;
    }
    for (var i = 1; i <= 12; i++)
    {
    appendOption(selectMonth, i, i);
    if (i == today.getMonth()) selectMonth.selectedIndex = selectMonth.options.length - 1;
    }
    updateSelectDay()
    selectDay.selectedIndex = today.getDate() - 1;
    </script>
    </html>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <script type="text/javascript">
            function test(m){
                var daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);//定义1~12月的天数            
                document.getElementById("Select2").innerHTML ="";
                for(var i=0;i<daysMonth[m-1];i++){
                    var oOption = document.createElement("option");
                    document.getElementById("Select2").add(oOption);
                    oOption.innerText = i+1;
                }
            }
        </script>
    </head>
    <body>
        <select id="Select1" onchange="test(this.options[this.selectedIndex].value)">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select id="Select2">
        </select></body>
    </html>