HtmlSelect Control

Article
10/23/2006

Creates a server-side control that maps to the <select> HTML element and allows you to create a list control.

<select id="programmaticID"
        OnServerChange="onserverchangehandler"
        DataSource="databindingsource"
        DataMember="datamembervalue"
        DataTextField="fieldtodatabindoptionttext"
        DataValueField="fieldtodatabindoptionvalue"
        Multiple
        Items="collectionofoptionelements"
        SelectedIndex="indexofcurrentlyselecteditem"
        Size="#ofvisibleitems"
        Value="currentitemvalue"
        runat="server" >

   <option>value1</option>
   <option>value2</option>

</select>

Remarks

Use the HtmlSelect control to program against the HTML <select> element. By default, this control renders as a drop-down list box. However, if you allow multiple selections (by specifying the Multiple attribute) or specify a value for the Size property that is greater than 1, the control is displayed as a list box.

To determine the selected item from a single selection HtmlSelect control, first use the SelectedItem property to obtain the index of the selected item. You can then use this index to retrieve the selected item from the Items collection.

To determine the selected items from an HtmlSelect control that allows multiple selections simultaneously, you need to iterate through the Items collection and test the Selected property of each item.

You can also bind the control to a data source. Set the DataSource property to specify the data source to bind to the control. Once the data source is bound to the control, you can specify which field to bind to the Value and Text properties by setting the DataValueField and DataTextField properties, respectively.

Example

The following example uses entries in an HtmlSelect control to set the background color for a span control. It also shows how to use the Items property to add new option items to the select list. This property is of the ListItemCollection type and can therefore access that class's Add method. The example code does this in the AddToList_Click event handler.

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      Sub Apply_Click(Source As Object, e As EventArgs)
         Span1.Style("background-color") = ColorSelect.Value
      End Sub

      Sub AddToList_Click(Source As Object, e As EventArgs)
         ColorSelect.Items.Add(Text1.Value)
      End Sub
   </script>
</head>
<body>
   <h3>HtmlSelect Sample</h3>
   <form runat="server">
      Select a color:<br>
      <select id="ColorSelect" runat="server">
         <option>SkyBlue</option>
         <option>LightGreen</option>
         <option>Gainsboro</option>
         <option>LemonChiffon</option>
      </select>
      <input type="button" runat="server" 
             Value="Apply" OnServerClick="Apply_Click">
      <p>
      Don't see your color in the list above?  You can add it here:<br>
      <input type="text" id="Text1" runat="server">
      <input type="button" runat="server" 
             Value="Add to List" OnServerClick="AddToList_Click">
      <p>
      <span id="Span1" runat="server">
         Click the button to apply a background color to this span.
      </span>
   </form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void Apply_Click(object Source, EventArgs e) 
      {
         Span1.Style["background-color"] = ColorSelect.Value;
      }
      void AddToList_Click(object Source, EventArgs e) 
      {
         ColorSelect.Items.Add(Text1.Value);
      }
   </script>
</head>
<body>
   <h3>HtmlSelect Sample</h3>
   <form runat="server">
      Select a color:<br>
      <select id="ColorSelect" runat="server">
         <option>SkyBlue</option>
         <option>LightGreen</option>
         <option>Gainsboro</option>
         <option>LemonChiffon</option>
      </select>
      <input type="button" runat="server" 
             Value="Apply" OnServerClick="Apply_Click">
      <p>
      Don't see your color in the list above?  You can add it here:<br>
      <input type="text" id="Text1" runat="server">
      <input type="button" runat="server" 
             Value="Add to List" OnServerClick="AddToList_Click">
      <p>
      <span id="Span1" runat="server">
         Click the button to apply a background color to this span.
      </span>
   </form>
</body>
</html>

The following example shows how to bind an HtmlSelect control to an ArrayList that is declared in the Page_Load event. There is also a SubmitBtn_Click event that displays the selected data bound value when the user clicks an HtmlInputButton control on the rendered page.

The Id property for the select control is StateSelect and the control's DataSource property is set to the values that ArrayList creates when the page is loaded. Then the select control's DataBind method binds the values in the ArrayList to the control itself.

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      Sub Page_Load(Sender As Object, e As EventArgs)
         If Not IsPostBack Then
            Dim values As New ArrayList()
            values.Add("IN")
            values.Add("KS")
            values.Add("MD")
            values.Add("MI")
            values.Add("OR")
            values.Add("TN")
            StateSelect.DataSource = values
            StateSelect.DataBind()
         End If
      End Sub

      Sub SubmitBtn_Click(sender As Object, e As EventArgs)
         Span1.InnerHtml = "You chose: " & StateSelect.Value
      End Sub
   </script>
</head>
<body>
   <h3>Data Binding to an HtmlSelect Control</h3>
   <form runat="server">
      Select a state:<br>
      <select id="StateSelect" runat="server" />
      <input type="submit" value="Display Selected State"
             OnServerClick="SubmitBtn_Click" runat="server">
      <p>
      <span id="Span1" runat="server" />
   </form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void Page_Load(Object Sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
            ArrayList values = new ArrayList();
            values.Add ("IN");
            values.Add ("KS");
            values.Add ("MD");
            values.Add ("MI");
            values.Add ("OR");
            values.Add ("TN");
            StateSelect.DataSource = values;
            StateSelect.DataBind();
         }
      }   
      void SubmitBtn_Click(Object sender, EventArgs e) 
      {
         Span1.InnerHtml = "You chose: " + StateSelect.Value;
      }
   </script>
</head>
<body>
   <h3>Data Binding to an HtmlSelect Control</h3>
   <form runat="server">
      Select a state:<br>
      <select id="StateSelect" runat="server" />
      <input type="submit" value="Display Selected State"
             OnServerClick="SubmitBtn_Click" runat="server">
      <p>
      <span id="Span1" runat="server" />
   </form>
</body>
</html>

Share via

HtmlSelect Control

Remarks

Example

See Also

Additional resources