Jquery实现无刷新DropDownList联动实现代码


Posted in Javascript onMarch 08, 2010

先看HTML,我们引用Jquery,放两个DropDownList:

<style type="text/css"> 
#ddlEmployeeCars 
{ 
display:none; 
position:absolute; 
top:50px; 
left:9px; 
} 
</style> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 <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>

接着写核心的Script:
<script language="javascript" 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: "Default.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) { 
$("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) 
); 
} 
} 
</script>

非常简单,检查值是不是0,然后ajax传值到server,成功后remove掉原来的option,append新的option.
看下WebPage的code:
public partial class _Default : System.Web.UI.Page 
{ 
[WebMethod] 
public static List<EmployeeCar> FetchEmployeeCars(int id) 
{ 
var emp = new EmployeeCar(); 
return emp.FetchEmployeeCars(id); 
} 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(); 
} 
} 
}

我们的Datasource class:
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(); 
} 
}

完了。希望这篇POST对您有帮助。
Javascript 相关文章推荐
JS中获取数据库中的值的方法
Jul 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
JavaScript this调用规则说明
Mar 08 #Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 #Javascript
JavaScript中的闭包原理分析
Mar 08 #Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 #Javascript
JavaScript 滚轮事件使用说明
Mar 07 #Javascript
javascript下4个跨浏览器必备的函数
Mar 07 #Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
You might like
PHP生成Flash动画的实现代码
2010/03/12 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
jQuery实现跨域
2015/02/03 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python 实现return返回多个值
2019/11/19 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python中for in的用法详解
2020/04/17 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
如何理解委托
2012/01/06 面试题
幼儿园五一活动方案
2014/02/07 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Go Plugins插件的实现方式
2021/08/07 Golang
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers