服务器之家

服务器之家 > 正文

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

时间:2019-10-16 10:56     来源/作者:asp.net技术网

用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至定义索引位置

标签:

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
返回顶部