ajax 如何使 dropdownlist 无刷新,Jquery实现无刷新DropDownList联动实现代码
先看HTML,我们引用Jquery,放两个DropDownList:
#ddlEmployeeCars
{
display:none;
position:absolute;
top:50px;
left:9px;
}
接着写核心的Script:
$(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(
$("").val(data[i].Id).html(data[i].Car)
);
}
}
非常简单,检查值是不是0,然后ajax传值到server,成功后remove掉原来的option,append新的option.
看下WebPage的code:
public partial class _Default : System.Web.UI.Page
{
[WebMethod]
public static List 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 LoadData()
{
return new List
{
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 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 FetchEmployees()
{
return new List
{
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对您有帮助。
ajax 如何使 dropdownlist 无刷新,Jquery实现无刷新DropDownList联动实现代码相关推荐
- ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...
- 用Ajax+js+jQuery实现无闪烁定时刷新页面 定时刷新
本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...
- ajax 局部页面替换innerhtml,ajax jquery 页面局部刷新的不同实现代码
以下示例是学习使用XMLHttpRequest时,实现的页面局部刷新的代码,分享下. 复制代码 代码示例: 页面局部刷新功能_www.jbxue.com window.onload = functio ...
- dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级 ...
- php jquery 局部页面刷新,jQuery页面刷新(局部、全部)问题分析_jquery
本文实例分两部分对jquery刷新问题进行介绍,第一部分介绍了呢页面局部刷新:第二部分介绍了页面全部刷新 第一:页面局部刷新 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法 ...
- jq分页 不刷新页面_jquery无刷新分页
希望有机会能和大家一起交流学习,220897863程序员之家群欢迎大家加入 在现在的项目中使用jquery实现无刷新的分页,数据库采用存储过程进行分页,具体代码就不说了,主要看前段的实现 PageCh ...
- 利用jquery load 局部刷新数据
<base><style>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: ...
- JQuery Mobile 样式刷新
在使用JQuery Mobile时,个人感觉最大的问题,就是AJAX动态增加控件刷新样式, 1.刷新样式顺序问题,首先要从最外层容器开始,一层一层往内刷新, 比如你使用collapsible,并且嵌套 ...
- jquery异步请求刷新
需求: 当我们使用jquery ajax的异步请求时候,往往需要加入请求完成再刷新页面的动作但是当我们在返回中加入window.local.reload()的时候,页面还没等待ajax请求结果返回,就 ...
最新文章
- 安全攻防技能——Web安全——SQL注入
- 第二章:搭建Android开发环境(读后感)
- hdu- 2642 Stars 二维树状数组
- “Imperceptible,Robust,and Targeted Adversaria lExamples for Automatic Speech Recognition”
- Sharepoint 2010 用VS定制Master,并且每个Web应用同一个Master
- 在ASP.NET中把数据POST到其他页面
- mysql中的replication_mysql中replication的相关问题总结
- 字节序转换 oracle,Oracle10g同字节序跨平台迁移
- 最大子段和动态规划_动态规划解决最大正方形问题
- Dapper实用教程
- 【ffmpeg】overlay带有透明通道的视频
- 网络之美:JavaScript中Get和Set访问器的实现
- 阵列信号处理——求根MUSIC算法(Root MUSIC)
- Abaqus齿轮有限元分析
- lamp一键安装包+linux,linux下的lanmp/lamp/lnmp一键安装包
- lingo入门——从河北省第三届研究生建模竞赛B题开始
- JavaEE中的依赖性——依赖查找
- 软件开发模型之迭代模型
- Mac VSCode OpenGL环境搭建
- 智能运维探索:有一种多指标异常检测方案,你可能没用过...
热门文章
- eclipse启动出现“An Error has Occurred. See the log file”解决方法
- 结合shiro 的图形验证码生成
- vim学习笔记(4)帮助与配置
- famous javascript library.
- 8月12号=》391页-395页
- 密码强弱提示(27)
- 表达式求值Spring.Expressions
- blockUI应用到Asp.Net页面时服务器控件(Button等)失效的问题
- 进程间通信之共享内存
- 3 .6 .5 优化Ad-Hoc工作负载