DropDownList Web 控件是一个下拉式的选单,功能和RadioButtonList Web 控件很类似,提供使用者在一群选项中选择单一的值;不过RadioButtonList Web 控件适合使用在较少量的选项群组项目,而DropDownList Web 控件则适合用来管理大量的选项群组项目。其使用语法如下:
<ASP:DropDownList Id="被程序代码所控制的名称" Runat="Server" AutoPostBack="True | False" *DataSource="<%数据系结叙述%>" *DataTextField="数据源的字段" *DataValueField="数据源的字段" OnSelectedIndexChanged="事件程序名称" > <ASP:ListItem/> </ASP:DropDownList>
*关于和数据源的数据系结部分,我们在后面的章节再介绍。 下表为DropDownList Web 控件的常用属性:
下列范例将DropDwonList Web 控件填入十二个月:
<Html> <ASP:DropDownList Id="ddlA" Runat="Server"> <ASP:ListItem>1 月</ASP:ListItem> <ASP:ListItem>2 月</ASP:ListItem> <ASP:ListItem>3 月</ASP:ListItem> <ASP:ListItem>4 月</ASP:ListItem> <ASP:ListItem>5 月</ASP:ListItem> <ASP:ListItem>6 月</ASP:ListItem> <ASP:ListItem>7 月</ASP:ListItem> <ASP:ListItem>8 月</ASP:ListItem> <ASP:ListItem>9 月</ASP:ListItem> <ASP:ListItem>10 月</ASP:ListItem> <ASP:ListItem>11 月</ASP:ListItem> <ASP:ListItem>12 月</ASP:ListItem> </ASP:DropDownList> </Html>
不过上列的方法太麻烦,我们可以利用Page_Load 事件用程序动态的加入项目,如下范例所示:
<Html> <ASP:DropDownList Id="ddlA" Runat="Server"/> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object,e As Eventargs) Dim shtI As Short Dim liA As ListItem For shtI=1 To 12 liA=New ListItem(shtI.ToString & "月") ddlA.Items.Add(liA) Next End Sub </Script> </Html>
这样程序代码就简洁多了。若要取得DropDownList Web 控件被选取到的项目,则可以利用和RadioButtonList Web 控件一样的方法,参考DropDownList Web 控件的SelectedItem 属性即可。下列范例当我们选择DropDownList Web 控件完毕后,按下按钮会将选取到的选项显示出来:
<Html> <Form Id="From1" Runat="Server"> <ASP:DropDownList Id="ddlA" Runat="Server"/> <ASP:Button Id="btnA" Text="请按我" OnClick="btnA_Click" Runat="Server"/> </Form> <ASP:Label Id="lblA" Runat="Server"/> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object,e As Eventargs) Dim shtI As Short Dim liA As ListItem For shtI=1 To 12 liA=New ListItem(shtI.ToString & "月") ddlA.Items.Add(liA) Next End Sub Sub btnA_Click(Sender As Object,e As Eventargs) lblA.Text="您所选择的项目是" & ddlA.SelectedItem.Text & _ " ,索引值是" & ddlA.SelectedIndex.ToString End Sub </Script> </Html>
DropDownList Web 控件所支持的事件是SelectedIndexChanged 事件。若指定发生本事件要触发的事件程序,并将AutoPostBack 属性设为True ,则当我们改变DropDownList Web 控件里的选项时,便会触发这个事件。下列范例将前一个范例的Button Web 控件拿掉,然后指定发生OnSelectedIndexChanged 所要执行的事件程序,并将AutoPostBack 设为True:
<Html> <Form Id="From1" Runat="Server"> <ASP:DropDownList Id="ddlA" AutoPostBack="True" OnSelectedIndexChanged="ddlA_Changed" Runat="Server"/> </Form> <ASP:Label Id="lblA" Runat="Server"/> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object,e As Eventargs) Dim shtI As Short Dim liA As ListItem For shtI=1 To 12 liA=New ListItem(shtI.ToString & "月") ddlA.Items.Add(liA) Next End Sub Sub ddlA_Changed(Sender As Object,e As Eventargs) lblA.Text="您所选择的项目是" & ddlA.SelectedItem.Text & _ " ,索引值是" & ddlA.SelectedIndex.ToString End Sub </Script> </Html>
选择正确的日期 这边我们来看一个比较实用的程序,它的作用是提供三个DropDownList Web 控件让使用者选择日期。但是这里并不是只有提供三个DropDownList 控件就了事,而是可以依据正确的年份以及月份提供正确的日期选择,以避免有如2 月31 日这种错误日期的发生。下列范例限制使用者只能选择包括今天以后五年内的日期:
<Html> 您认为两岸三通什么时候开放比较合适? <Form Id="Form1" Runat="Server"> <ASP:DropDownList Id="D1" AutoPostBack="True" OnSelectedIndexChanged="DayChg" Runat="Server"/>年 <ASP:DropDownList Id="D2" AutoPostBack="True" OnSelectedIndexChanged="DayChg" Runat="Server"/>月 <ASP:DropDownList Id="D3" AutoPostBack="True" OnSelectedIndexChanged="DayChg" Runat="Server"/>日 </Form> <ASP:Label Id="Label1" Runat="Server" /> <Script Language="VB" Runat="Server"> Sub Page_Load(Sender As Object, e As Eventargs) If Page.IsPostBack=True Then Return '如果不是第一次加载就不执行 Dim shtI As Short Dim liA As ListItem For shtI=Year(Now()) To Year(Now())+5 '加入未来五年内的时间 liA=New ListItem(shtI) D1.Items.Add(shtI) Next For shtI=1 To 12 '将月份填入 liA=New ListItem(shtI) D2.Items.Add(shtI) Next D2.Items(Month(Now())-1).Selected=True '将选择到的项目显示为现在的 月份 For shtI=1 To Day(DateSerial(Year(Now()),Month(Now())+1,1-1)) '取得 现在的月份有几天 liA=New ListItem(shtI) D3.Items.Add(shtI) Next D3.Items(Day(Now())-1).Selected=True '将选择到的项目显示为现在的日 End Sub Sub DayChg(Sender As Object , e As EventArgs) '下列判断如果使用者选择日期不是今天之后, 则将日及回指定到今天 If DateSerial(D1.SelectedItem.Text.ToInt16, _ D2.SelectedItem.Text.ToInt16, _ D2.SelectedItem.Text.ToInt16) < Now Then D1.Items(0).Selected=True D2.Items(Month(Now())-1).Selected=True D3.Items(Day(Now())-1).Selected=True Return End If Dim shtI As Short Dim liA As ListItem Dim shtD As Short shtD=D3.SelectedItem.Text.ToInt16'储存使用者选取的日期 D3.Items.Clear '移除所有的项目 For shtI=1 To Day(DateSerial(D1.SelectedItem.Text.ToInt16, _ D2.SelectedItem.Text.ToInt16+1,1-1)) liA=New ListItem(shtI) D3.Items.Add(shtI) Next '下列判断如果使用者原先选的日期大于现在月份的日期, '就选择第一天; 否则将原日期填回去 If Day(DateSerial(D1.SelectedItem.Text.ToInt16, _ D2.SelectedItem.Text.ToInt16+1,1-1)) < shtD Then D3.Items(0).Selected=True Else D3.Items(shtD-1).Selected=True End If Label1.Text="您所选择的日期为" & D1.SelectedItem.Text & " 年" & _ D2.SelectedItem.Text & " 月" & _ D3.SelectedItem.Text & " 日" End Sub </Script> </Html>
|