Ajax 下拉列表联动显示
一般处理程序文件 代码
using System;
using System.Web;
using System.Linq;
using System.Data.Linq;
using System.Text;
public class Xialaliebiao : IHttpHandler {
private MydbDataContext _Context = new MydbDataContext();
public void ProcessRequest (HttpContext context) {
//获取主键值
var sprent = context.Request["sprent"];
//查找数据ID
var var = _Context.ChinaStates.Where(p => p.ParentAreaCode == sprent);
//定义Item集合 为空
string item = null;
StringBuilder builder = new StringBuilder();//调用using System.Text; 用StringBuilder造个对象
if(var.Count()>0)
{
foreach(ChinaStates data in var)
{
//调用集合Item 给其属性赋值
builder.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");
}
}
//送回Xml
item = builder.ToString();//把 item 用tostring() 全部转换成字符串
context.Response.Write("<?xml version='1.0'?>");
context.Response.Write("<root>");
context.Response.Write(item);
context.Response.Write("</root>");
context.Response.End();
}
HTML界面代码
<title></title>
<script src="jquery-1.8.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
FillProv();
$("#ddlProv").change(function () {
FillCity();//城市下拉列表显示城市信息
})
$("#ddlCity").change(function () {
FillCounty();//区县下拉列表显示区县信息
})
})
//定义城市回调函数
function FillProv (){
$.ajax({
url: "Hand/Xialaliebiao.ashx",
data: { sprent: "0001" },//找到获取值sprent(在一般配置文件里) 0001(根据城市id)
tpye: "POST",
dataType: "XML",
success: function (data) {
$("#ddlProv").empty();//清空下拉列表信息
var items = $(data).find("item");//掉item 集合
for(var i=0;i<items.length;i++)//用for 给每个的赋值
{
var code = $(items).eq(i).attr("code");//给items里任意一个code获取属性
var name = $(items).eq(i).attr("name");//给items里任意一个name获取属性
var $op = $("<option value='" + code + "'>" + name + "</Option>")//找到每个省份的value值(code)给他附上名字
$("#ddlProv").append($op);//给省份下拉列表 添加 名字
}
//加载完省份了。再调用加载城市就没有问题了。
FillCity();//由于用Ajax服务器端和客户端同时运行 上面加载完了省份信息 在这里加载城市信息就不会错了
}//sucess
})//ajax
}
function FillCity() {
var prov=$("#ddlProv").val();
$.ajax({
url: "Hand/Xialaliebiao.ashx",
data: {sprent:prov},
type: "POST",
dataType: "XML",
success: function (data) {
$("#ddlCity").empty();
var items = $(data).find("item");
for(var i=0;i<items.length;i++)
{
var code = $(items).eq(i).attr("code");
var name = $(items).eq(i).attr("name");
var $op = $("<option value='" + code + "'>" + name + "</option>");
$("#ddlCity").append($op);
}
FillCounty();//加载完城市信息 在这里掉区县信息
}//success
})//ajax
}
function FillCounty() {
var city =$("#ddlCity").val();
$.ajax({
url: "Hand/Xialaliebiao.ashx",
data: { sprent: city },
type: "POST",
dataType: "XML",
success: function (data) {
$("ddlCounty").empty();
var items = $(data).find("item");
for (var i = 0; i < items.length;i++)
{
var code = $(items).eq(i).attr("code");
var name = $(items).eq(i).attr("name");
var $op = $("<option value='" + code + "'>" + name + "</option>");
$("#ddlCounty").append($op);
}
}//success
})//ajax
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProv" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCounty" runat="server">
</asp:DropDownList>
</div>
</form>
Ajax 下拉列表联动显示的更多相关文章
- 下拉列表联动显示(Car表) 三级联动
.Models namespace 下拉列表联动显示_Car表_.Models { public class ProductorBF { private MyDBDataContext _contex ...
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- 下拉列表的使用(Ajax/数据联动)
下拉列表联动
- 基于MVC3下拉列表联动(JQuery)
上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传 ...
- 使用 AJAX + 三级联动 实现分类出全国各地的省,市,区
使用AJAX + 三级联动 实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- asp.net DropDownList无刷新ajax二级联动实现详细过程
只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...
随机推荐
- BZOJ 3375: [Usaco2004 Mar]Paranoid Cows 发疯的奶牛( set )
果然写得短就跑得慢... 直接用set就行了(你要写棵平衡树也可以).没有包含的话, 假如L(i) <= L(j), 那么R[i] <= R[j]. 所以从小到大扫, 每次查找左端点小于当 ...
- 高级UIKit-08(TCPSocket)
[day1001_MoviePlayer]:视频播放 需要导入MediaPlayer.framework - (void)viewDidLoad { [super viewDidLoad]; NSUR ...
- UVA 10581 - Partitioning for fun and profit(数论递推)
10581 - Partitioning for fun and profit 题目链接 题意:给定m, n,表示分配给n个格子,分配m个数字进去,每一个格子最少1,而且序列要是递增的,问第k个字典序 ...
- c语言:链表排序, 链表反转
下面将实现链表排序的排序和遍历显示功能: 所定义的链表结构如下: head -> p1 -> p2 ->p3 ->....->pn; head的本身不作为数据节点,hea ...
- Troubleshooting:oVirt-engine
问题:执行./create_db_devel.sh -u postgres创建数据库时出错 描述: [root@localhost dbscripts]# ./create_db_devel.sh - ...
- Internet基础
互联网是什么? Internet是一个互联网,它是将提供不同服务的,使用不同技术的,具有不同功能的物理网络互连起来而形成的. TCP/IP是一个协议集,它对Internet中主机的寻址方式,主机的命名 ...
- 【linux】内核make编译链接相关变量定义
欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...
- 认识axure部件库中各个部件的属性
在axure中每一个部件都有自己的属性,下面这个表格,我们就首先来了解认识一下!以下内容来自网站蓝图,版权归原作者所有! 属性名称 属性说明 属性举例 标签 用来标示部件的名称,在axure中,部件名 ...
- C++学习笔记14,private/protected/public继承,私有继承,保护继承,公有继承(五)(总结)
各种继承方式: 特征 公有继承 保护继承 私有继承 公有成员变为 派生类的公有成员 派生类的保护成员 派生类的私有成员 保护成员变为 派生类的保护成员 派生类的保护成员 派生类的私有成员 私有成员变为 ...
- C++中 auto自己主动变量,命名空间,using作用以及作用域
1.autokeyword的用途 A:自己主动变量.能够自己主动获取类型,输出,类似泛型 B:自己主动变量,能够实现自己主动循环一维数组 C:自己主动循环的时候,相应的必须是常量 2.auto自 ...