ASP.NET中使用DropDownList实现无刷新二级联动详细过程
Demo.sql
create table Car(
[id] int identity,
[brand] varchar(50) not null,
[type] varchar(50) not null
)
go insert into Car ([brand],[type])values('BMW','B'),('BMW','M'),('BMW','W'),
('BENZ','B'),('BENZ','E'),('BENZ','N'),('BENZ','Z'),
('HONDA','H'),('HONDA','O'),('HONDA','N'),('HONDA','D'),('HONDA','A'),
('TOYOTA','T'),('TOYOTA','O'),('TOYOTA','Y'),('TOYOTA','A')
Demo.aspx
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList ID="dropBrand" runat="server" OnSelectedIndexChanged="dropBrand_SelectedIndexChanged"
Width="" AutoPostBack="True">
</asp:DropDownList>
<asp:DropDownList ID="dropType" runat="server" Width="">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
Demo.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDrop();
}
} private void BindDrop()
{
//将数据捆绑到下拉列表中
string sqlStr = "select distinct [brand] from Car";
DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
dropBrand.DataTextField = "brand"; //设置列表显示的字
dropBrand.DataValueField = "brand"; //设置列表提交后获得的字段,自己理解为隐藏绑定数据
dropBrand.DataSource = dt;
dropBrand.DataBind();
dropBrand.Items.Insert(, new ListItem("请选择车子品牌", ""));//第一项中加入内容,重点是绑定后添加
dropType.Items.Insert(, new ListItem("请选择车子品牌型号", ""));//第一项中加入内容,重点是绑定后添加
} protected void dropBrand_SelectedIndexChanged(object sender, EventArgs e)
{
string sqlStr = "select * from Car where [brand]='" + dropBrand.SelectedValue + "'";//页面加载后dropBrand.DataValueField隐藏绑定的数据,后边根据它查询dropType要显现的数据
DataTable dt = SqlHelper.ExecuteDataTable(sqlStr);
dropType.DataTextField = "type"; //设置dropBrand事件SelectedIndexChanged改变后dropType列表显示的数据
dropType.DataValueField = "id";
dropType.DataSource = dt;
dropType.DataBind();
}
参考原文:http://www.cnblogs.com/cqchai/archive/2011/05/28/2061378.html
ASP.NET中使用DropDownList实现无刷新二级联动详细过程的更多相关文章
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jquery 无刷新多级联动
原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...
- JQuery中国省市区无刷新三级联动查询
之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...
- asp.net中的<%%>形式的详细用法实例讲解
asp.net中的代码分离模式我们肯定都不陌生,C#(或者其它语言)写的代码一般不会和设计语言HTML混在一起,但是有的时候也避免不了,这时就会在UI页面里用<%%>来绑定显示.绑定变量数 ...
- Asp.Net下,基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- Asp:Button控件onclick事件无刷新页面提示消息
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...
- Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动
看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...
- Ajax做无刷新三级联动
1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- Ecshop文章列表页显示内容摘要
本教程中讲到的“内容摘要”指的是文章内容的前 60个字符(当然也可以是前40个,前50个等等) 下面以 2.7.2版 + 官方默认模板 为例进行讲解: 1).修改 includes/lib_artic ...
- Discuz!开发手册
如何使用Discuz开发手册? 1.首先建议你了解Discuz目录结构-全局篇 通过对目录结构的了解,会在以后的创作道路上提供坚实的基础! 2.你还需要了解Discuz! X3.1数据字典 3.创建自 ...
- [Javascript] Decorators in JavaScript
First, what is 'High Order function', basic just a function, inside the function return another fuct ...
- 整理PHP_YII环境安装遇到的一些问题
安装yii遇到的一些问题 操作环境 一.Permissiondenied问题 在终端执行如下命令(注意因为是本地测试环境不需要考虑太多权限问题,如果正式环境请慎重) sudo chmod -R o+r ...
- C用函数指针模拟重载 C++重载
C中为什么不支持重载,即同一作用域内不允许出现同名函数? 我们都知道重载是c++面向对象的特性.c语言中是不存在的.所谓重载简单来说就是一个函数名可以实现不同的功能,要么输入参数不同或者参数个数不同, ...
- Apache2.4中开通HTTP基本认证
Apache2.4中开通HTTP基本认证,需要在Apache的配置文件中增加如下代码 WSGIPassAuthorization On 否则则无法认证
- truncate/drop表非常慢,怎么办?用硬链接,极速体验
这个这个,我必须花巨大篇幅,记录下今天清空表记录的英雄壮举,可知道一个drop操作,执行了一下午啊一下午,这是要急出翔的节奏..呵呵,下面开始 我的需求:某表因历史原因,积压了1亿条记录,约占360G ...
- Ext JS 6 入门学习资料大全(2016-12-14)
现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...
- 配置svn
Linux搭建SVN Server 其中包括添加防火墙规则
- Could not get BatchedBridge, make sure your bundle is packaged correctly
react-native 运行android项目的时候运行成功但是模拟器上会提示: Could not get BatchedBridge, make sure your bundle is pack ...