Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlSelect
ASP.NET Syntax ASP.NET Syntax for HTML Controls
Creates a selectable drop-down list.
Declarative Syntax
<select id="accessID" runat="server"
DataSource = "databindingsource"
DataTextField = "fieldtodatabindoptionttext"
DataValueField = "fieldtodatabindoptionvalue"
Items = "collectionofoptionelements"
Multiple
OnServerChange = "onserverchangehandler"
SelectedIndex = "indexofcurrentlyselecteditem"
Size = "numberofvisibleitems"
Value = "currentitemvalue">
<option>value1</option>
<option>value2</option>
</select>
For information on the individual members of this class, see HtmlSelect in the class library.
The HtmlSelect control enables programming of the HTML <select> element. This control is used in cases where a developer needs to programmatically access a selectable list of HTML <option> elements.
The following samples illustrate use of the HtmlSelect control.
This sample uses entries in an HtmlSelect control to set the background color for a <span> control. The example also shows how the HtmlSelect.Items property can be used to dynamically add new option items to the select list.
- In the <
body> of the Web Forms page, define the HtmlForm to contain the HtmlSelect control, two HtmlInputButton controls to trigger the event handlers, and the span control that is to be manipulated.
<body>
<p><span id="Message" runat="server">
Click the button to apply a background color to this span.
</span>
<form runat="server">
<p>Select a color: <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 = "applyColor">
<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">
</form>
</body>
- In the <
head> of the page, define the event handlers: one for applying the selection, and one for adding options to the list.
<head>
<script language="C#" runat="server">
void applyColor ( object Source, EventArgs e ) {
Message.Style [ "background-color" ] = ColorSelect.Value;
}
void addToList ( object Source, EventArgs e ) {
ColorSelect.Items.Add ( Text1.Value );
}
</script>
</head>
This sample illustrates how to bind a data source to an HtmlSelect control. The data source in this case is an ArrayList that is defined in the Page_Load event.
The id property of the HtmlSelect is set to StateSelect. When the page loads the first time ( not postback ), an ArrayList object named states is created, list items are added, and then the select control’s DataSource property is assigned to use the ArrayList object. Finally, to bind the values in the ArrayList to the control itself, the control’s DataBind method is called.
<head>
<script language="C#" runat="server">
void Page_Load ( Object Sender, EventArgs E ) {
if ( !IsPostBack ) {
ArrayList states=new ArrayList ( );
states.Add ( "IN" );
states.Add ( "KS" );
states.Add ( "MD" );
states.Add ( "MI" );
states.Add ( "OR" );
states.Add ( "TN" );
StateSelect.DataSource=states;
StateSelect.DataBind ( );
}
}
void submitHandler ( Object sender, EventArgs e ) {
Message.InnerHtml = "You chose " + StateSelect.Value;
}
</script>
</head>
The form submit handler simply displays the selected value when the user clicks on the HtmlInputButton control on the page.
HtmlSelect Class HtmlForm Control Web Forms Events and Handlers