[ASP.NET][JavaScript] 下拉選單連動

2013-04-29

4143
0
2013-07-23

下拉選單的連動有很多方式與做法這邊就列一下JavaScript的作法

此處範例為透過日期月分、日的連動首先在頁面整理好版面，等下年、月、日分別對應到tdSelect1、tdSelect2、tdSelect3

<head runat="server">
    <title>Demo</title>    
    <script type="text/javascript" language="javascript" src="Scripts/JSDemo.js" ></script>
    
</head>
<body>    
    <table >
        <tbody>
        <tr>
            <td id="tdSelect1" style="width:100px;"></td>
            <td id="tdSelect2" style="width:100px;"></td>
            <td id="tdSelect3" style="width:100px;"></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

接下來就是JS的內容了，這邊用GET來取得想要的資料

function init() {
    selectMenu(1, 0);
}

function createRequest() {
    try {
        request = new XMLHttpRequest();
    }
    catch (tryMS) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (otherMS) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed) {
                request = null;
            }
        }
    }
    return request;
}

function selectMenu(_type, _value) {
    var url = 'aspx/SelectPage.aspx?t=' + escape(_type) + '&v=' + escape(_value);
    var getrequestInfo = createRequest();
    
    if (getrequestInfo == null) {
        alert('object build not success!!!');
        return;
    }

    getrequestInfo.open('GET', url, true);
    getrequestInfo.onreadystatechange = showselect;
    getrequestInfo.send(null);
}

function showselect() {
    if (getrequestInfo.readyState == 4) {
        if (getrequestInfo.status == 200) {
            var tmp = getrequestInfo.responseText.split('|');
            if (tmp[0] != "" && tmp[1] != "") {
                var TBSelect = document.getElementById('tdSelect' + tmp[1]);
                TBSelect.innerHTML = tmp[0];
                
            }
        }
    }
}

呼叫頁面的內容

    {
        StringBuilder SB = new StringBuilder();
        string _type = Server.UrlDecode(Request.QueryString["t"]);
        string _value = Server.UrlDecode(Request.QueryString["v"]);

        switch (_type)
        {
            case "1":   //year 只取前後3年
                SB.Append("<select name=\"slyear\" id=\"slyear\" onchange=\"selectMenu(2, this.value);\" >");
                SB.Append("<option value=\"-1\">請選擇...</option>");
                for (int i = DateTime.Now.Year - 3; i < DateTime.Now.Year + 3; i++)
                    SB.Append("<option value=\""+ i.ToString()+"\">" + i.ToString() +"</option>");
                SB.Append("</select><span>年</span>");
                SB.Append("|1");
                break;
            case "2":   //mm
                if (_value == "-1") return;
                SB.Append("<select name=\"slmonth\" id=\"slmonth\" onchange=\"selectMenu(3, this.value);\" >");
                SB.Append("<option value=\"-1\">請選擇...</option>");
                for (int i = 1; i < 13; i++)
                    SB.Append("<option value=\""+_value + "," + string.Format("{00}",i) +"\">"+ string.Format("{00}",i)+"</option>");
                SB.Append("</select><span>月</span>");
                SB.Append("|2");
                break;
            case "3":   //dd
                if (_value == "-1") return;
                string[] temp = _value.Split(',');
                SB.Append("<select name=\"slday\" id=\"slday\" ");
                SB.Append("<option value=\"-1\">請選擇...</option>");
                for (int i = 1; i < DateTime.DaysInMonth(Int32.Parse(temp[0]), Int32.Parse(temp[1])) + 1; i++)
                    SB.Append("<option value=\""+_value + "," + string.Format("{00}",i)+"\">"+string.Format("{00}",i)+"</option>");
                SB.Append("</select><span>日</span>");
                SB.Append("|3");
                break;
        }
        Response.Clear();
        Response.Write(SB.ToString());
    }

顯示結果

另外，使用DropDownList就設定AutoPostBack="True"就好

這樣就可以直接在SelectedIndexChanged更動了

        </asp:DropDownList>
        <span>年</span>
        <asp:DropDownList ID="ddlMonth" runat="server" AutoPostBack="True" 
            onselectedindexchanged="ddlMonth_SelectedIndexChanged" >
        </asp:DropDownList>
        <span>月</span>
        <asp:DropDownList ID="ddlDay" runat="server">
        </asp:DropDownList>
        <span>日</span>

最後，對於這個年、月、日的範例，其實還可以直接在JS產出，不用特地去Server端取得資料當然是因為這個範例是用日期的關係，如果要取資料庫的資料還是要傳這一趟的。

//iMonth:當月
function daysInMonth(iYear, iMonth) {
    return 32 - new Date(iYear, iMonth - 1, 32).getDate();
}
function SelectInit() {
    var tdSelect1 = document.getElementById("tdSelect1");
    var tdSelect2 = document.getElementById("tdSelect2");
    var tdSelect3 = document.getElementById("tdSelect3");
    var temp1 = new Array();
    var temp2 = new Array();
    var temp3 = new Array();
    var DateNow = new Date();
    
    temp1.push('<select name="ddlyear" id="ddlyear">');
    for (var i=DateNow.getYear() -3; i<DateNow.getYear() +3;i++)
        temp1.push('<option selected="selected" value="' + i + '">' + i + '</option>');
    temp1.push('</select>');
    temp1.push('<strong><span style="color: #006633">年</span></strong>');

    temp2.push('<select name="ddlmonth" id="ddlmonth" onchange=\"AddMenu(this.value);\" >');
    for (var i = 1; i < 13; i++)
        temp2.push('<option selected="selected" value="' + i + '">' + i + '</option>');
    temp2.push('</select>');
    temp2.push('<strong><span style="color: #006633">月</span></strong>');

    var thedays = daysInMonth(DateNow.getYear(), DateNow.getMonth());
    temp3.push('<select name="ddlmonth" id="ddlmonth">');
    for (var i = 1; i < thedays+1; i++)
        temp3.push('<option selected="selected" value="' + i + '">' + i + '</option>');
    temp3.push('</select>');
    temp3.push('<strong><span style="color: #006633">日</span></strong>');

    tdSelect1.innerHTML = temp1.join('');
    tdSelect2.innerHTML = temp2.join('');
    tdSelect3.innerHTML = temp3.join('');
}

function AddMenu(_value) {    
    
    var ddlYM = document.getElementById('ddlyear').value;
    var tdSelect3 = document.getElementById("tdSelect3");
    var thedays = daysInMonth(ddlYM, _value);
    var temp = new Array();
    temp.push('<select name="ddlday' + _value + '" id="ddlday' + _value + '">');
    for (var i = 1; i <= thedays; i++) {
        if (i == new Date().getDate())
            temp.push('<option selected="selected" value="' + i + '">' + i + '</option>');
        else
            temp.push('<option value="' + i + '">' + i + '</option>');
    }
    temp.push('</select>');
    temp.push('<strong><span style="color: #006633">日</span></strong>');
    tdSelect3.innerHTML = temp.join('');   
}

範例檔案下載

JavaScript

回首頁