Creating Drop-down Lists

To see how to work with drop-down list boxes, take a look at the DropDownLists example on the CD-ROM. You can see this example at work in Figure 17.4, where I'm selecting an item in a drop-down list, and in Figure 17.5, where the application is displaying the selection I've made.

Determining the selection the user has made in a drop-down list is easy; because you can only select one item at a time in a drop-down list, you use the SelectedItem and SelectedIndex properties of this control. Here's how that works in the DropDownLists example, where I'm reporting the selection the user made by displaying a message in a text box:

   Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As _
       System.Object, ByVal e As System.EventArgs) Handles _
       DropDownList1.SelectedIndexChanged
       TextBox1.Text = "You selected " & _
           DropDownList1.SelectedItem.Text
   End Sub

And that's all there is to it. Here's WebForm1.aspx for the DropDownLists example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="DropDownLists.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>DropDownLists example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content=
        "http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:DropDownList id=DropDownList1 style="Z-INDEX: 101; LEFT: 160px;
    POSITION: absolute; TOP: 58px" runat="server" Width="144px"
    Height="22px" AutoPostBack="True">
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
</asp:DropDownList>
<asp:TextBox id=TextBox1 style="Z-INDEX: 102; LEFT: 155px; POSITION:
    absolute; TOP: 118px" runat="server"></asp:TextBox>

    </form>

  </body>
</HTML>

And here's WebForm1.aspx.vb for this example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents DropDownList1 As _
        System.Web.UI.WebControls.DropDownList
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox

#Region " Web Form Designer Generated Code "
 
    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As _
        System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e _
        As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

    Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        DropDownList1.SelectedIndexChanged
        TextBox1.Text = "You selected " & _
            DropDownList1.SelectedItem.Text
    End Sub
End Class