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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
小学美术教学反思
2014/02/01 职场文书
会计专业求职信范文
2014/03/16 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
会计求职自荐信范文
2015/03/04 职场文书
Python Parser的用法
2021/05/12 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
python创建字典及相关管理操作
2022/04/13 Python