请大家帮我修改一下这个年月控件


待解决的问题：
1.点td出来年的下拉列表，但是一闪就没了，选不了，不知道是怎么回事？
2.点<<取前一年，点>>取后一年？
3.点下面具体的月份，直接自动关闭，把当前的年和月返回文本框？
4.怎么把这个显示层定位在文本框的下面？谁能帮我解决一下第一个问题，这个问题我是真的郁闷了，其他的问题我想我还能解决
以下是html代码：
大家测试的话，需要引用jquery文件<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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 runat="server">
    <title>无标题页</title>
    <script src="App_Themes/Default/js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
function tmpSelectYearInnerHTML(obj){ //年份的下拉框
    var myDate = new Date();
    var strYear = myDate.getFullYear();
    if (strYear.toString().match(/\D/) != null){
        alert("年份输入参数不是数字！");
        return;
    }
    var m = (strYear) ? strYear : new Date().getFullYear();
    if (m < 1000 || m > 9999){
        alert("年份值不在 1000 到 9999 之间！");
        return;
    }
    var n = m - 50;
    if (n < 1000){n = 1000;}
    if (n + 101 > 9999){n = 9974;}
    var s = "&nbsp;<select name=tmpSelectYear style='font-size: 12px;' ";
    s += 'onblur="this.style.display= \'none\'"';
    s += ' onchange="this.style.display= \'none\'"';
//alert(s);
    var selectInnerHTML = s;
    for (var i = n; i < n + 101; i++){
        if (i == m){ 
            selectInnerHTML += "<option value='" + i + "' selected='selected'>" + i + "年" + "</option>\r\n"; 
        }
        else{ 
            selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n"; 
        }
    }
    selectInnerHTML += "</select>";
    $("select").css("display","");
    $(obj).html(selectInnerHTML);
    $("select").focus();  
}
/*function setYearDiv(obj){
    var txt = $(obj).find("option[selected='selected']").text();
    $(obj).parents("select").remove();
    $(obj).html(txt);
}*/</script>
</head>
<body>
    <div>
        <table width="160px" style="font-size:12px;border:1px; border-color:Black;">
            <tr>
                <td style="width:25%; background-color:#FFFFFF;" align="center" onclick=""><<</td>
                <td colspan="2" style="width:50%;" align="center" onclick="tmpSelectYearInnerHTML(this);">
                </td>
                <td style="width:25%;" align="center" onclick="">>></td>
            </tr>
            <tr>
                <td align="center" style="border:1px;">01</td>
                <td align="center" style="border:1px;">02</td>
                <td align="center" style="border:1px;">03</td>
                <td align="center" style="border:1px;">04</td>
            </tr>
            <tr>
                <td align="center" style="border:1px;">05</td>
                <td align="center" style="border:1px;">06</td>
                <td align="center" style="border:1px;">07</td>
                <td align="center" style="border:1px;">08</td>
            </tr>
            <tr>
                <td align="center" style="border:1px;">09</td>
                <td align="center" style="border:1px;">10</td>
                <td align="center" style="border:1px;">11</td>
                <td align="center" style="border:1px;">12</td>
            </tr>
        </table>
    </div>
</body>
</html>

解决方案 »

  1.   

    楼主你的代码我无法调试，不能正常显示，而且竟然报jquery库有错
      

  2.   

    因为select鼠标事件会传递给容器。<!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 runat="server">
        <title>无标题页</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    function tmpSelectYearInnerHTML(obj){ //年份的下拉框
        var myDate = new Date();
        var strYear = $("select").val() || myDate.getFullYear();
        if (strYear.toString().match(/\D/) != null){
            alert("年份输入参数不是数字！");
            return;
        }
        var m = (strYear) ? strYear : new Date().getFullYear();
        if (m < 1000 || m > 9999){
            alert("年份值不在 1000 到 9999 之间！");
            return;
        }
        var n = m - 50;
        if (n < 1000){n = 1000;}
        if (n + 101 > 9999){n = 9974;}
    if ($("select").css("display") && !$("select").css("display").match(/^(null|none)$/i)) return;

        var s = "&nbsp;<select name=tmpSelectYear style='font-size: 12px;' ";
        s += 'onblur="this.style.display= \'none\'"';
        s += ' onchange="this.style.display= \'none\'"';
        //alert(s);
        var selectInnerHTML = s;
        for (var i = n; i < n + 101; i++){
            if (i == m){ 
                selectInnerHTML += "<option value='" + i + "' selected='selected'>" + i + "年" + "</option>\r\n"; 
            }
            else{ 
                selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n"; 
            }
        }
        selectInnerHTML += "</select>";
        $("select").css("display","");
        $(obj).html(selectInnerHTML);
        $("select").focus();  
    }
    /*function setYearDiv(obj){
        var txt = $(obj).find("option[selected='selected']").text();
        $(obj).parents("select").remove();
        $(obj).html(txt);
    }*/</script>
    </head>
    <body>
        <div>
            <table width="160px" style="font-size:12px;border:1px; border-color:Black;">
                <tr>
                    <td style="width:25%; background-color:#FFFFFF;" align="center" onclick=""><<</td>
                    <td colspan="2" style="width:50%;" align="center" onmousedown="tmpSelectYearInnerHTML(this);">
                    </td>
                    <td style="width:25%;" align="center" onclick="">>></td>
                </tr>
                <tr>
                    <td align="center" style="border:1px;">01</td>
                    <td align="center" style="border:1px;">02</td>
                    <td align="center" style="border:1px;">03</td>
                    <td align="center" style="border:1px;">04</td>
                </tr>
                <tr>
                    <td align="center" style="border:1px;">05</td>
                    <td align="center" style="border:1px;">06</td>
                    <td align="center" style="border:1px;">07</td>
                    <td align="center" style="border:1px;">08</td>
                </tr>
                <tr>
                    <td align="center" style="border:1px;">09</td>
                    <td align="center" style="border:1px;">10</td>
                    <td align="center" style="border:1px;">11</td>
                    <td align="center" style="border:1px;">12</td>
                </tr>
            </table>
        </div>
    </body>
    </html>你先实现吧，这个代码我只能打30分（100分满分）。
      

  3.   

    日期控件。推荐你用 my97datepicker