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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
导师就业推荐信范文
2014/05/22 职场文书
管理标语大全
2014/06/24 职场文书
淘宝活动总结范文
2014/06/26 职场文书
大学生心理活动总结
2014/07/04 职场文书
商铺消防安全责任书
2014/07/29 职场文书
认错检讨书
2014/10/02 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
公司内部升职自荐信
2015/03/27 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书