The <asp:DropDownList> control presents a drop-down menu of its from which one can be selected. It is implemented in XHTML as the <select> tag. A DropDownList can be created manually, with scripts, or bound to a data source. The following DropDownList is created by extracting BookType field values from the BooksDB.mdb database and automatically producing a drop-down item for each value.

Format for DropDownList Control

The general format for a DropDownList control is shown below.

<asp:DropDownList id="id" Runat="Server"
  AutoPostBack="True|False"
  DataSourceID="id"
  DataTextField="field"
  DataTextFormatString="{string}"
  DataValueField="field"
    property="value"......
    OnSelectedIndexChanged="subprogram"
>
	
  <asp:ListItem
    Selected="False|True"
    Text="label"
    Value="value"
  />
  ...
	 
</asp:DropDownList>

When creating a DropDownList manually, the control requires an opening and closing tag within which appear one or more <asp:ListItem> entries giving the items from which to select. An item can be coded within a single empty tag containing Text and Value settings; or, each item can be coded as a pair of open and close tags with the Text property as the enclosed string. If a Value property is not coded, the Text property is treated as the Value of the selection. An item can be preselected by setting its Selected="True" property. A DropDownList coded with common settings is shown below.

<asp:DropDownList id="DropList" Runat="Server">
  <asp:ListItem Text="Item 1" Value="1"/>
  <asp:ListItem Text="Item 2" Value="2"/>
  <asp:ListItem Text="Item 3" Value="3"/>
  <asp:ListItem Text="Item 4" Value="4"/>
  <asp:ListItem Text="Item 5" Value="5"/>
</asp:DropDownList>

Determining a DropDownList Selection

A DropDownList normally is accompanied by a button which calls a subprogram to process the item selected from the list. Items are indexed beginning with 0. The index value of the selected item is given by the SelectedIndex property. The value of the selected item is referenced through the SelectedValue or SelectedItem.Value property; its text label is referenced through the SelectedItem.Text property.

It is not necessary to test the SelectedIndex property before accessing Text and Value properties of the chosen item. On page postback, the first item in the list is automatically selected if no other selection has been made. The following code and script reports the index, Text, and Value properties selected from a DropDownList.

<SCRIPT Runat="Server">

Sub Get_Selection (Src As Object, Args As EventArgs)

  ItemIndex.Text = DropList.SelectedIndex
  ItemValue1.Text = DropList.SelectedValue
  ItemText.Text = DropList.SelectedItem.Text
  ItemValue2.Text = DropList.SelectedItem.Value
	
End Sub

</SCRIPT>

<form Runat="Server">

<asp:DropDownList id="DropList" Runat="Server">
  <asp:ListItem Text="Item 1" Value="1"/>
  <asp:ListItem Text="Item 2" Value="2"/>
  <asp:ListItem Text="Item 3" Value="3"/>
  <asp:ListItem Text="Item 4" Value="4"/>
  <asp:ListItem Text="Item 5" Value="5"/>
</asp:DropDownList>
<asp:Button Text="Select" OnClick="Get_Selection" Runat="Server"/>

SelectedIndex: <asp:TextBox id="ItemIndex" Size="3" Runat="Server"/>
SelectedItem.Text: <asp:TextBox id="ItemText" Size="3" Runat="Server"/><br/>
SelectedValue: <asp:TextBox id="ItemValue1" Size="3" Runat="Server"/>
SelectedItem.Value: <asp:TextBox id="ItemValue2" Size="3" Runat="Server"/>

</form>

The DropDownList itself can trigger a script by setting its AutoPostBack="True" property and identifying a subprogram to run in the OnSelectedIndexChanged property.

Scripting Drop-Down List Items

A DropDownList is one of the list controls, meaning that the items in the list are part of an Items collection of ListItem objects. As such, they can be controlled through scripting in addition to being hard coded. As in the case with RadioButtonList and CheckBoxList controls, a DropDownList can use its Items collection's Add(), Insert(), RemoveAt(), and Clear() methods to programmatically build and edit its list items. The list's Count property gives the number of items in the list.

Dim NewItem As ListItem
NewItem = New ListItem("text","value")
DropDownList.Items.Add(NewItem)

or

DropDownList.Items.Add(New ListItem("text","value"))

DropDownList.Items.Insert(index, New ListItem("text","value"))
DropDownList.Items.RemoveAt(index)
DropDownList.Items.Clear()

DropDownList.Items.Count

The following example defines a DropDownList with individual items added by a script when the page is loaded. The last item in the list is pre-selected. Its index is one less than the number of items in the list (DropList.Items.Count - 1).

<SCRIPT Runat="Server">

Sub Page_Load

  If Not Page.IsPostBack Then
    DropList.Items.Add(New ListItem("Item 1", "1"))
    DropList.Items.Add(New ListItem("Item 2", "2"))
    DropList.Items.Add(New ListItem("Item 3", "3"))
    DropList.Items.Add(New ListItem("Item 4", "4"))
    DropList.Items.Add(New ListItem("Item 5", "5"))
    DropList.Items(DropList.Items.Count - 1).Selected = "True"
  End If

End Sub

</SCRIPT>

<form Runat="Server">

<asp:DropDownList id="DropList" Runat="Server"/>

</form>

Binding to a Data Source

Text and Value properties for a DropDownList can be automatically bound from an external data source. The following list is created by binding to an AccessDataSource and assigning Text and Value properties for the list from the BookType field of the BooksDB.mdb database. The selected book type from the DropDownList is displayed in a GridView control by automatically posting back the selected item.

<SCRIPT Runat="Server">

Sub Get_Book_Type (Src As Object, Args As EventArgs)

  Dim SQLString As String 
  SQLString = "SELECT BookID, BookTitle, BookPrice, BookQty FROM Books " & _
              "WHERE BookType = '" & TypeList2.SelectedValue & "' " & _
              "ORDER BY BookID"
  BookSource2.SelectCommand = SQLString

End Sub

</SCRIPT>

<form Runat="Server">

<h3>View Book Types</h3>

<asp:AccessDataSource id="BookSource1" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT DISTINCT BookType FROM Books ORDER BY BookType"/>

<asp:DropDownList id="TypeList" Runat="Server"
  DataSourceID="BookSource1"
  DataTextField="BookType"
  DataValueField="BookType"
  AutoPostBack="True"
  OnSelectedIndexChanged="Get_Book_Type"/><br/><br/>

<asp:AccessDataSource id="BookSource2" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT BookID, BookTitle, BookPrice, BookQty FROM Books
                 WHERE BookType = 'Database' ORDER BY BookType"/>

<asp:GridView id="BookGrid" DataSourceID="BookSource2" Runat="Server"/>

</form>

The DropDownList is produced by associating it with an AccessDataSource to return a recordset of BookType values from the Books table. Single instances of unique (DISTINCT) BookType values are returned. This recordset is bound to the DropDownList through the latter's DataSourceID property. A list item is created for each returned record. The BookType value is used for both the Text property (DataTextField) and Value property (DataValueField) of the DropDownList. The listed items can be formatted differently from their default displays by supplying a DataTextFormatString for the DropDownList to include additional text or formatting tags.

Note that the first value in the DropDownList is "Database." This is the same BookType value used to initially populate the GridView through its AccessDataSource, thereby ensuring that both controls are synchronized when the page opens.

This DropDownList performs automatic post-back when an item is selected. Therefore, AutoPostBack="True" is coded for the control along with the subprogram name in the OnSelectedIndexChanged="Get_Book_Type" property.

When the subprogram is called, the value of the selected item is given by the SelectedValue property of the list (the SelectedItem.Value property also can be used). This value, which matches a BookType value in the database, is concatenated within a SELECT statement and assigned to the SelectCommand of the AccessDataSource (BookSource2) that populates the GridView.