Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlSelect
HtmlSelect Class Select Element
Creates a selectable drop-down list.
Declarative Syntax
<select id="accessID" runat="server"
datasource = "databindingsource"
datatextfield = "fieldtodatabindoptionttext"
datavaluefield = "fieldtodatabindoptionvalue"
items = "collectionofoptionelements"
multiple
name = "selectName"
size = "numberofvisibleitems"
value = "currentitemvalue"
selectedIndex = "indexofcurrentlyselecteditem"
onServerChange = "onserverchangehandler">
<option>value1</option>
<option>value2</option>
</select>
For information on the individual members of this class, see HtmlSelect in the class library.
- This control requires both start and end tags ( or a start tag with a trailing slash
/> ).
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 HtmlInputText control to accept user input.
<body>
<p id="msg" runat="server">Click the button to apply a background color to this element.
<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 below: </p>
<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.
<script language="C#" runat="server">
void applyColor ( object Source, EventArgs e ) {
msg.Style [ "background-color" ] = colorSelect.Value;
}
void addToList ( object Source, EventArgs e ) {
colorSelect.Items.Add ( Text1.Value );
}
</script>
This sample illustrates how to bind a data source to an HtmlSelect control.
- In the <
body> of the Web Forms page, define the HtmlForm to contain the HtmlSelect control, an HtmlButton control to trigger the event handlers, and an HtmlInputText control that will display the selected option.
<form runat="server">
<select id="lstStates" runat="server"
datatextfield="statename" datavaluefield="statename" />
<button type="Submit" onServerClick="getState" runat="server">Send</button>
<p>Selected State: <b><input value='<%# lstStates.Value %>' runat="server" /></b>
</form>
- In the <
head> of the page, define the event handlers: one to bind the HtmlSelect to a data source, and the other to simpy invoke Page.DataBind.
<script language="C#" runat="server">
void Page_Load ( Object sender, EventArgs e ) {
if ( !IsPostBack ) {
string query = "SELECT StateName FROM States WHERE CountryCode='US' ORDER BY StateName";
lstStates.DataSource = fetchData ( query );
lstStates.DataBind ( );
}
}
void getState ( Object sender, EventArgs e ) {
Page.DataBind ( );
}
</script>
Rather than explictly pull out the variable from the HtmlSelect and then manipulate the input control, here we just call Page.DataBind instead. This evaluates any <%# ... %> expressions within the page.
The example above involve technologies discussed elsewhere in this workshop. Please refer to Web Forms Data Model and Data Binding in Web Forms.
HtmlSelect Class Select Element Web Forms Events and Handlers