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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
Jquery获取radio选中的值
May 05 jQuery
Node.js文件编码格式的转换的方法
Apr 27 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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脚本
2006/11/26 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
python实现线程池的方法
2015/06/30 Python
python中PIL安装简单教程
2016/04/21 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
上海某公司.net方向笔试题
2014/09/14 面试题
庆七一活动方案
2014/01/25 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
校园运动会广播稿
2014/10/06 职场文书