服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - ASP.NET教程 - 用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

2019-10-16 10:56asp.net技术网 ASP.NET教程

用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置;准备数据,创建一个对象,将是存储DropDownList控件每个Item数据

用Javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置。 
准备数据,创建一个对象,将是存储DropDownList控件每个Item数据。 

复制代码代码如下:


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 


在.aspx放置一个DropDownList控件: 

复制代码代码如下:


<asp:DropDownList ID="DropDownListCatalog" runat="server"></asp:DropDownList> 


在.aspx.vb绑定数据: 

复制代码代码如下:


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 = "新闻频道" 
cls.Add(cl) 
cl = New Catalog() 
cl.ID = 2 
cl.Name = "体育频道" 
cls.Add(cl) 
cl = New Catalog() 
cl.ID = 3 
cl.Name = "军事频道" 
cls.Add(cl) 
cl = New Catalog() 
cl.ID = 4 
cl.Name = "教育频道" 
cls.Add(cl) 
Return cls 
End Function 
End Class 


准备数据与环境后,写Javascript

复制代码代码如下:


window.onload = function () { 
var catalog = document.getElementById("<%=DropDownListCatalog.ClientID%>"); 
var obj = document.createElement("option") 
obj.text = "请选择..." 
obj.value = 0 
catalog.options.insertBefore(obj, catalog.options[0]); 


DEMO
用javascript为DropDownList控件下拉式选择添加一个Item至定义索引位置

延伸 · 阅读

精彩推荐