<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

<style type="text/css">

#ddlEmployeeCars

{

display: none;

position: absolute;

top: 50px;

left: 9px;

}

</style>

<script type="text/javascript">

$(function () {

var $ddl = $("select[name$=ddlEmployee]");

var $ddlCars = $("select[name$=ddlEmployeeCars]");

$ddl.focus();

$ddl.bind("change keyup", function () {

if ($(this).val() != "0") {

loadEmployeeCars($("select option:selected").val());

$ddlCars.fadeIn("slow");

} else {

$ddlCars.fadeOut("slow");

}

});

});

function loadEmployeeCars(selectedItem) {

$.ajax({

type: "POST",

url: "WebForm1.aspx/FetchEmployeeCars",

data: "{id: " + selectedItem + "}",

contentType: "application/json; charset=utf-8",

dataType: "json",

async: true,

success: function Success(data) {

printEmployeeCars(data.d);

}

});

}

function printEmployeeCars(data) {

/* 方法1

$("select[name$=ddlEmployeeCars] > option").remove();

for (var i = 0; i < data.length; i++) {

$("select[name$=ddlEmployeeCars]").append( $("<option></option>").val(data[i].Id).html(data[i].Car) );

}

*/

$("select[name$=ddlEmployeeCars]").empty();

$.each(data, function (i, item) {

$("<option></option>").val(item["Id"]).text(item["Car"]).appendTo($("select[name$=ddlEmployeeCars]"));

});

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:DropDownList ID="ddlEmployee" runat="server" AppendDataBoundItems="true">

<asp:ListItem Text="(Please Select)" Value="0" Selected="True" />

</asp:DropDownList>

<asp:DropDownList ID="ddlEmployeeCars" runat="server">

</asp:DropDownList>

</div>

</form>

</body>

</html>

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

var employees = new Employee();

ddlEmployee.DataSource = employees.FetchEmployees();

ddlEmployee.DataTextField = "Surname";

ddlEmployee.DataValueField = "Id";

ddlEmployee.DataBind();

}

}

[WebMethod]

public static List<EmployeeCar> FetchEmployeeCars(int id)

{

var emp = new EmployeeCar();

return emp.FetchEmployeeCars(id);

}

public class EmployeeCar

{

public int Id { get; set; }

public string Car { get; set; }

private static List<EmployeeCar> LoadData()

{

return new List<EmployeeCar>

{

new EmployeeCar {Id = 1, Car = "Ford"},

new EmployeeCar {Id = 1, Car = "Holden"},

new EmployeeCar {Id = 1, Car = "Honda"},

new EmployeeCar {Id = 2, Car = "Toyota"},

new EmployeeCar {Id = 2, Car = "General Motors"},

new EmployeeCar {Id = 2, Car = "Volvo"},

new EmployeeCar {Id = 3, Car = "Ferrari"},

new EmployeeCar {Id = 3, Car = "Porsche"},

new EmployeeCar {Id = 3, Car = "Ford2"}

};

}

public List<EmployeeCar> FetchEmployeeCars(int id)

{

return (from p in LoadData()

where p.Id == id

select p).ToList();

}

}

public class Employee

{

public int Id { get; set; }

public string GivenName { get; set; }

public string Surname { get; set; }

public List<Employee> FetchEmployees()

{

return new List<Employee>

{

new Employee {Id = 1, GivenName = "Tom", Surname = "Hanks"},

new Employee {Id = 2, GivenName = "Hugh", Surname = "Jackman"},

new Employee {Id = 3, GivenName = "Petter", Surname = "Liu"}

};

}

public Employee FetchEmployee(int id)

{

var employees = FetchEmployees();

return (from p in employees

where p.Id == id

select p).First();

}

}

Jquery实现无刷新DropDownList联动的更多相关文章

  1. jquery 无刷新多级联动

    原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...

  2. JQuery中国省市区无刷新三级联动查询

    之前有写过用<Ajax控件来实现中国的省市区无刷新查询> 今天用JQuery来实现,用Ajax控件和JQuery的优缺点就先不说了. 效果图如下: 下面来结合代码来详细说明一下如何用JQu ...

  3. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  4. jQuery.pager无刷新分页

    刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...

  5. jQuery Ajax无刷新操作

    下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现. //后台实例代码 ashx文件(可替换为从数据库中读取) public void ProcessRequest(HttpCont ...

  6. jQuery实现无刷新切换主题皮肤功能

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...

  7. jQuery实现两个DropDownList联动(MVC)

    近段时间原本是学习MVC的,谁知道把jQuery也学上了.而且觉得对jQuery更感兴趣,比如今早上有写了一个练习<jQuery实现DropDownList(MVC)>http://www ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. jquery.axios无刷新机制删除

    思路:无刷新机制就是不用的刷新动作 ,用前端html语法删除和后端的数据库删,同时删除达到效果 除操作,来实现无刷洗的方法

随机推荐

  1. MYSQL 名人博客

    : DavidYang的博客 - CSDN.NET DimitriK's (dim) Weblog Xaprb · Stay Curious! 飞鸿无痕的博客 - ChinaUnix博客 何登成的技术 ...

  2. HDU 2896 病毒侵袭 【AC自动机】

    HDU 2222 仅仅求出了和文本串匹配的模式串个数,本题要求求出匹配的模式串的编号. 不同的部分在代码中的注释部分. #include <cstdio> #include <cst ...

  3. 自己动手写js分享插件 [支持https] (可以分享QQ空间，微信，新浪微博。。。)

    由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教 ...

  4. C/C++之回调函数

    转自:http://www.cnblogs.com/chenyuming507950417/archive/2012/01/02/2310114.html 今天讨论下C/C++中的回调函数. 在理解“ ...

  5. web小流量实验方案

    近期在思考怎么做小流量,在网上搜了一下,总结例如以下: 1.前提,站点pv已经达到了一定的规模,比方上百万pv,不做小流量冒然更新功能,可能会带来大面积流量损失.在这样的前提下须要做小流量实验 2.什 ...

  6. C#编程兵书

    <C#编程兵书> 基本信息 作者: 张志强 胡君 丛书名: 程序员藏经阁 出版社:电子工业出版社 ISBN:9787121207402 上架时间:2013-8-26 出版日期:2013 年 ...

  7. 了解Redis 和 Memcached 的区别

    1.Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支持更丰富的数据操作,通常在Memcached里,你需要将数据拿到客户端来进行类似的修改再set回去. ...

  8. mysql的数据恢复

    转载自:http://ourmysql.com/archives/1293 数据库数据被误删除是经常看到的事情,数据的恢复也就自然成为了DBA很重要的一门基本功夫,比较笨拙的办法是拉出历史的备份到另外 ...

  9. .NET-MVC站点发布注意事项

    在进行MVC站点发布的过程中需要注意bin文件,使用vs2013自带的发布功能容易漏掉一些dll文件,所以在发布之后需要将程序的bin目录下的文件拷贝到发布好的iis站点下面

  10. RSA 公钥加密——私钥解密

    作者:刘巍然-学酥链接:http://www.zhihu.com/question/25912483/answer/31653639来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...