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 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
8个JS的reduce使用实例和reduce操作方式
Oct 05 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面向对象分析设计的61条军规小结
2010/07/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
原生js实现购物车功能
2020/09/23 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python创建临时文件夹的方法
2015/07/06 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python如何使用input函数获取输入
2020/08/06 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
美德好少年主要事迹
2014/01/29 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
查摆剖析材料范文
2014/09/30 职场文书
教师先进事迹材料
2014/12/16 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL