dropdownlist

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #server #asp #function #xhtml #object

asp.net 专栏收录该内容

2 篇文章

订阅专栏

有些時候在設計讓使用者填寫資料的網頁時，常常需要使用到下拉式選單

讓使用者一定得選某個項目，像是生日、郵遞區號 ... 等等

雖然說可以用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" %> 
 
   02  
 
   03<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
   04<html xmlns="http://www.w3.org/1999/xhtml"> 
 
   05<head runat="server"> 
 
   06    <title></title> 
 
   07  
 
   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); 
 
   12  
 
   13            var end = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
 
   14  
 
   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) { 
 
   18                end[1] = 29; 
 
   19            } 
 
   20  
 
   21            return (d >= 1 && d <= end[m]); 
 
   22        } 
 
   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); 
 
   26  
 
   27            if (obj_month.selectedIndex == 0) { 
 
   28                obj_day.length = 2; 
 
   29                return; 
 
   30            } 
 
   31  
 
   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) { 
 
   35                end[1] = 29; 
 
   36            } 
 
   37  
 
   38            obj_day.length = end[m]; 
 
   39            for (i = 0; i < end[m]; i++) { 
 
   40                obj_day.options[i + 2] = new Option(i + 1); 
 
   41            } 
 
   42        } 
 
   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; 
 
   46            } 
 
   47        } 
 
   48    </script> 
 
   49  
 
   50</head> 
 
   51<body> 
 
   52    <form id="form1" runat="server"> 
 
   53    <div> 
 
   54        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
 
   55        </asp:ScriptManager> 
 
   56        <asp:HiddenField ID="birth" runat="server" /> 
 
   57        <asp:DropDownList ID="ddlYear" runat="server" AppendDataBoundItems="True" TabIndex="8"> 
 
   58        </asp:DropDownList> 
 
   59        年 
 
   60        <asp:DropDownList ID="ddlMonth" runat="server" AppendDataBoundItems="True" TabIndex="9"> 
 
   61        </asp:DropDownList> 
 
   62        月 
 
   63        <asp:DropDownList ID="ddlDay" runat="server" AppendDataBoundItems="True" TabIndex="10"> 
 
   64        </asp:DropDownList> 
 
   65        日 
 
   66       
 
   67        <asp:Button ID="btnOK" runat="server" onclick="btnOK_Click" Text="回傳" /> 
 
   68    </div> 
 
   69    </form> 
 
   70</body> 
 
   71</html>

test.aspx.cs

 
   01using System; 
 
   02  
 
   03public partial class test : System.Web.UI.Page 
 
   04{ 
 
   05    protected void Page_Load(object sender, EventArgs e) 
 
   06    { 
 
   07        //初始化生日 
 
   08        InitDateList(); 
 
   09        //加入Script 
 
   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 + "'));"; 
 
   12    } 
 
   13    /// <!--初始化生日DropDownList--> 
 
   14    /// <summary> 
 
   15    /// 初始化生日DropDownList - design By Phoenix 2008 - 
 
   16    /// </summary> 
 
   17    private void InitDateList() 
 
   18    { 
 
   19        if (ddlYear.Items.Count == 0 || ddlMonth.Items.Count == 0 || ddlDay.Items.Count == 0) 
 
   20        { 
 
   21            int displaymaxyear = 98; 
 
   22            int currentyear = DateTime.Now.Year; 
 
   23            //Init 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()); 
 
   29            //Init Month 
 
   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()); 
 
   35            //Init Day 
 
   36            ddlDay.Items.Clear(); 
 
   37            ddlDay.Items.Add("Day"); 
 
   38            ddlDay.Items.Add("==="); 
 
   39            for (int listIndex = 0; listIndex < 31; listIndex++) 
 
   40                ddlDay.Items.Add((listIndex + 1).ToString()); 
 
   41        } 
 
   42    } 
 
   43    protected void btnOK_Click(object sender, EventArgs e) 
 
   44    { 
 
   45        //接收 
 
   46        string mybirthday = Request[birth.UniqueID]; 
 
   47        Response.Write(mybirthday); 
 
   48    } 
 
   49}

執行結果