Use javascript to drop down the DropDownList control and add an Item to define the index location.

Source: Internet
Author: User

Use Javascript to drop down the DropDownList control and add an Item to define the index position.
Prepare data and create an object that stores the data of each Item in the DropDownList control. Copy codeThe Code is as follows: Imports Microsoft. VisualBasic
Namespace Insus. NET
Public Class Catalog
Private _ ID As Integer
Private _ Name As String
Public Property ID As Integer
Get
Return _ ID
End Get
Set (value As Integer)
_ ID = value
End Set
End Property
Public Property Name As String
Get
Return _ Name
End Get
Set (value As String)
_ Name = value
End Set
End Property
End Class
End Namespace

Place a DropDownList control in. aspx:Copy codeThe Code is as follows: <asp: DropDownList ID = "DropDownListCatalog" runat = "server"> </asp: DropDownList>

Bind data in. aspx. vb:Copy codeThe Code is as follows: Imports Insus. NET
Partial Class _ Default
Inherits System. Web. UI. Page
Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load
If Not IsPostBack Then
Data_Binding ()
End If
End Sub
Private Sub Data_Binding ()
Me. DropDownListCatalog. DataSource = GetData ()
Me. DropDownListCatalog. DataValueField = "ID"
Me. DropDownListCatalog. DataTextField = "Name"
Me. DropDownListCatalog. DataBind ()
End Sub
Private Function GetData () As List (Of Catalog)
Dim cls As New List (Of Catalog)
Dim cl As Catalog = New Catalog ()
Cl. ID = 1
Cl. Name = "News Channel"
Cls. Add (cl)
Cl = New Catalog ()
Cl. ID = 2
Cl. Name = "sports channel"
Cls. Add (cl)
Cl = New Catalog ()
Cl. ID = 3
Cl. Name = "military channel"
Cls. Add (cl)
Cl = New Catalog ()
Cl. ID = 4
Cl. Name = "education channel"
Cls. Add (cl)
Return cls
End Function
End Class

After preparing the data and environment, write Javascript:Copy codeThe Code is as follows: window. onload = function (){
Var catalog = document. getElementById ("<% = DropDownListCatalog. ClientID %> ");
Var obj = document. createElement ("option ")
Obj. text = "Select ..."
Obj. value = 0
Catalog. options. insertBefore (obj, catalog. options [0]);
}

DEMO:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.