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>