有些時候 在設計讓使用者填寫資料的網頁時,常常需要使用到下拉式選單
讓使用者一定得選某個項目,像是 生日 、 郵遞區號 ... 等等
雖然說可以用AJAX ControlToolkit的CascadingDropDown來達成效果,不過還要寫Web服務(麻煩)
而且還有點效能上的問題(會比較慢一些)
這時候,如果使用JavaScript來輔助,效能會好很多的哦~
Let's Try
生日範例:
首先 我們在頁面上放了一個HiddenField用來儲存使用者所選擇的生日
三個DropDownList 分別為年 月 日
一個ScriptManager (方便抓取控制項)
還有3支JavaScript Function
test.aspx
01 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> |
08 | < script type = "text/javascript" > |
09 | function isValidDay(obj_year, obj_month, obj_day) { |
10 | var m = parseInt(obj_month.options[obj_month.selectedIndex].text, 10) - 1; |
11 | var d = parseInt(obj_day.options[obj_day.selectedIndex].text, 10); |
13 | var end = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); |
15 | if ((obj_year.options[obj_year.selectedIndex].text % 4 == 0 |
16 | && obj_year.options[obj_year.selectedIndex].text % 100 != 0) |
17 | || obj_year.options[obj_year.selectedIndex].text % 400 == 0) { |
21 | return (d >= 1 && d <= end[m]); |
23 | function SetDayList(obj_year, obj_month, obj_day) { |
24 | var m = parseInt(obj_month.options[obj_month.selectedIndex].text, 10) - 1; |
25 | var end = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); |
27 | if (obj_month.selectedIndex == 0) { |
32 | if ((obj_year.options[obj_year.selectedIndex].text % 4 == 0 |
33 | && obj_year.options[obj_year.selectedIndex].text % 100 != 0) |
34 | || obj_year.options[obj_year.selectedIndex].text % 400 == 0) { |
38 | obj_day.length = end[m]; |
39 | for (i = 0; i < end [m]; i++) { |
40 | obj_day.options[i + 2] = new Option(i + 1); |
43 | function SetBirthday(obj_year, obj_month, obj_day, obj_birth) { |
44 | if (isValidDay(obj_year, obj_month, obj_day)) { |
45 | obj_birth.value = obj_year .options[obj_year.selectedIndex].text + '/' + obj_month.options[obj_month.selectedIndex].text + '/' + obj_day.options[obj_day.selectedIndex].text; |
52 | < form id = "form1" runat = "server" > |
54 | < asp:ScriptManager ID = "ScriptManager1" runat = "server" > |
56 | < asp:HiddenField ID = "birth" runat = "server" /> |
57 | < asp:DropDownList ID = "ddlYear" runat = "server" AppendDataBoundItems = "True" TabIndex = "8" > |
60 | < asp:DropDownList ID = "ddlMonth" runat = "server" AppendDataBoundItems = "True" TabIndex = "9" > |
63 | < asp:DropDownList ID = "ddlDay" runat = "server" AppendDataBoundItems = "True" TabIndex = "10" > |
67 | < asp:Button ID = "btnOK" runat = "server" onclick = "btnOK_Click" Text = "回傳" /> |
test.aspx.cs
03 | public partial class test : System.Web.UI.Page |
05 | protected void Page_Load( object sender, EventArgs e) |
10 | ddlMonth.Attributes[ "onchange" ] = "javascript:SetDayList($get('" + ddlYear.UniqueID + "'), $get('" + ddlMonth.UniqueID + "'), $get('" + ddlDay.UniqueID + "'));" ; |
11 | ddlDay.Attributes[ "onchange" ] = "javascript:SetBirthday($get('" + ddlYear.UniqueID + "'), $get('" + ddlMonth.UniqueID + "'), $get('" + ddlDay.UniqueID + "'), $get('" + birth.UniqueID + "'));" ; |
13 | /// <!--初始化生日DropDownList--> |
15 | /// 初始化生日DropDownList - design By Phoenix 2008 - |
17 | private void InitDateList() |
19 | if (ddlYear.Items.Count == 0 || ddlMonth.Items.Count == 0 || ddlDay.Items.Count == 0) |
21 | int displaymaxyear = 98; |
22 | int currentyear = DateTime.Now.Year; |
24 | ddlYear.Items.Clear(); |
25 | ddlYear.Items.Add( "Year" ); |
26 | ddlYear.Items.Add( "====" ); |
27 | for ( int listIndex = 2; listIndex <= displaymaxyear; listIndex++) |
28 | ddlYear.Items.Add((currentyear - listIndex + 2).ToString()); |
30 | ddlMonth.Items.Clear(); |
31 | ddlMonth.Items.Add( "Month" ); |
32 | ddlMonth.Items.Add( "=====" ); |
33 | for ( int listIndex = 0; listIndex < 12; listIndex++) |
34 | ddlMonth.Items.Add((listIndex + 1).ToString()); |
37 | ddlDay.Items.Add( "Day" ); |
38 | ddlDay.Items.Add( "===" ); |
39 | for ( int listIndex = 0; listIndex < 31; listIndex++) |
40 | ddlDay.Items.Add((listIndex + 1).ToString()); |
43 | protected void btnOK_Click( object sender, EventArgs e) |
46 | string mybirthday = Request[birth.UniqueID]; |
47 | Response.Write(mybirthday); |
執行結果