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对数字的格式化使用说明
Jan 12 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jsTree使用记录实例
Dec 01 Javascript
js和jquery中获取非行间样式
May 05 jQuery
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
Vue js with语句原理及用法解析
Sep 03 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
php英文单词统计器
2016/06/23 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
vue移动端实现下拉刷新
2018/04/22 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python操作csv文件实例详解
2017/07/31 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
基于python 凸包问题的解决
2020/04/16 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
参观考察邀请函范文
2014/01/29 职场文书
医院合作意向书范本
2015/05/08 职场文书
民事起诉书范本
2015/05/19 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS