ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值

界面代码:


代码如下:

<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 80px;">
<p>
选择颜色:</p>
<asp:DropDownList ID="ddlColor" runat="server">
<asp:ListItem Text="--- 请选择 ---" Value=""></asp:ListItem>
<asp:ListItem Text="红色" Value="1"></asp:ListItem>
<asp:ListItem Text="黄色" Value="2"></asp:ListItem>
<asp:ListItem Text="蓝色" Value="3"></asp:ListItem>
</asp:DropDownList>
</fieldset>
</div>
<br />
<div align="center" id="message">
</div>
</form>

脚本代码:


代码如下:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 绑定keyup和change事件
$("#<%=ddlColor.ClientID %>").bind("keyup change", function () {
if ($(this).val() != "") {
// 这里需要注意,$(this).text()获取的是整个集合的text属性内容,所以需要再过滤下,把选中的项取出来
$("#message").text("Text: " + $(this).find(":selected").text() + "Value: " + $(this).val());
}
else {
$("#message").text("");
}
});
});
</script>

选择一种颜色显示如下:

(0)

相关推荐

  • ASP.NET中DropDownList和ListBox实现两级联动功能

    DropDownList和ListBox实现两级联动功能,它们可以将从后台数据库中搜选的出来的信息加以绑定,这里要实现的功能是在DropDownList中选择"省",然后让ListBox自动将其省份下的"市"显示出来,这就是所谓的两级联动功能,这个功能我们在很多注册网页上看见,今天就为大家解开ASP.NET神秘的面纱. 一.设置前台界面,在Web窗体中添加DropDownList和ListBox两个控件. 界面图如下所示. 二.编写后台代码 在这,后台代码编写在其窗

  • ASP.NET MVC DropDownList数据绑定及使用详解

    一:DropDownList 1.1 DropDownList绑定数据 1.1.1 DropDownList 固定绑定 这种方式适合那些已经固定的数据绑定到DropDownList上. 例 复制代码 代码如下: <asp:DropDownList runat="server" ID="ddlArea" Width="120px" > <asp:Listitem value="0">选择性别</as

  • 在ASP.NET 2.0中操作数据之三十一:使用DataList来一行显示多条记录

    导言 在前两章的做的DataList的例子里我们都是使用单列的HTML<table>来显示数据.而自定义使DataList将数据显示在多列多行的table里也非常容易.而且还可以以单行多列来显示数据. 我们可以通过RepeatColumns和RepeatDirection属性来自定义DataList.这两个属性决定了数据显示时候的列数和方向(水平或垂直).图1是以一个3列的table来显示product信息的DataList例子. 图 1: DataList 一行显示三条product信息 通

  • asp.net DropDownList自定义控件,让你的分类更清晰

    看到Discuz是2个下拉列表进行合并的,网上找了一些资料,然后写了这个小源码,在这里和大家分享一下! 运行效果图,如下所示(深黑的地方选不中,因为那是上一级的分类): 项目结构图如下所示: Controls类库SmartDropDownList.cs代码如下所示: SmartDropDownList.cs 复制代码 代码如下: using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using Syste

  • ASP.NET 2.0中的数据操作之八:使用两个DropDownList过滤的主/从报表

    导言 在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有一对多关系的记录时非常合适, 同时它也可以很容易的被扩展以显示多个一对多关系的数据. 比如, 一个订单系统应该包含表示客户,订单和订单明细的表. 一个客户也许有多个订单,每个订单又包含多条订单项. 这样的数据可以使用两个DropDownList和一个GridView呈现给用户. 第一个

  • 在ASP.NET 2.0中操作数据之三十三:基于DataList和Repeater使用DropDownList过滤的主/从报表

    导言 在前面的使用DropDownList过滤的主/从报表一章里我们使用GridView创建的主/从表,显示一些"主"记录.用户可以根据主记录来查看"从"(详细)的内容.主/从表在呈现一对多关系和含多列的表的信息时是一个好的选择.在前面我们已经学过如何使用GridView和DetailsView来实现.本章和后面两章我们将重新复习一下这些概念,但是主要学习使用DataList和Repeater来实现.本章我们将学习使用DropDownList包含主记录,而在Data

  • ASP.NET MVC中为DropDownListFor设置选中项的方法

    在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List<SelectListItem>,把SelectListItem选中项的Selected属性设置为true,再把该类型对象实例放到ViewBag,ViewData或Model中传递给前台视图. 通过遍历List<SelectListItem>类型对象实例 □ 控制器 public Action

  • 在ASP.NET 2.0中操作数据之三十二:数据控件的嵌套

    导言 除了静态HTML和数据绑定语法,template也可以包含Web控件和用户控件.这些控件的属性可以通过声明语法,数据绑定语法或在服务器端通过事件处理编程来设置. 通过将控件嵌入到template里,可以自定义界面,提升用户体验.例如,在在GridView控件中使用TemplateField 里,我们学习了如何通过在GridView的TemplateField里加一个Calendar控件来表示员工的雇佣日期.在给编辑和新增界面增加验证控件 和定制数据修改界面 里,我们学习了如何通过添加验证控

  • 在ASP.NET 2.0中操作数据之三十:格式化DataList和Repeater的数据

    导言 在前面的教程里我们学习了DataList提供了一些风格样式的属性.而且我们还学习了如何定义HeadStyle, ItemStyle, AlternatingItemStyle, 和SelectedItemStyle等属性的默认CSS.除了这四个属性外,DataList还提供了其它属性,比如Font, ForeColor, BackColor, 和BorderWidth.而Repeater没有提供任何这样的属性.如果你需要用Reperter来实现这些效果,你就需要在templates里直接写

  • ASP.NET 2.0中的数据操作之七:使用DropDownList过滤的主/从报表

    导言 主/从报表是一种很常见的报表, 这类报表中首先会显示一些主记录. 然后用户可以深入(追溯)某条主记录来查看该主记录的详情. 主/从报表是显示一对多关系的理想选择, 比如一个报表显示所有的产品类别,然后根据用户选择的特定类别显示与之关联的产品. 另外, 主/从表在显示"宽"表(有很多列的表)的详细信息时也很有用.例如主/从报表的主表部分显示数据库中产品表的产品名称和单价, 具体到某一个产品时再显示其他的产品字段(类别,供应商,单位数量,等等). 有很多方法可以实现主/从报表. 在这

随机推荐