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对您有帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

famous javascript library.

https://famo.us/ THE ULTIMATE WEB PLATFORM FOR DEVELOPERS AND DESIGNERS转载于:https://www.cnblogs.com/feika/p/4382525.html

MyEclipse/Eclipse 中使用javap

-c -classpath ${workspace_loc}\${project_name}\bin ${java_type_name} 特别强调我所掉过的一个坑&#xff1a;这行配置bin后面空一格而非\&#xff0c;就这个小问题让我吃了苦头 有知道原因的望告知。。。。。。。真想了解原因 转载于:https://www.cnblogs.com/blueFlowers…

怎样王远端服务器上传文件,传王电子传真使用指南-Freefax传真服务器,传王A6,免费传真...

接线方案传王A6品牌宣传为『传王&#xff0c;最棒的&#xff01;传王&#xff0c;传真之王。』,并不是一句空泛的宣传。传王A6充分考虑用户的办公环境&#xff0c;能与电话很好地混合使用&#xff0c;通过不同的接线方案&#xff0c;配合丰富的权限管理和系统设定&#xff0c;满…

《梦断代码》阅读笔记之第8章至最后

以下是我读了梦断代码第八章之后的读书笔记&#xff1a; 1.自己做的软件自己一定要用&#xff0c;即“吃你自己的狗食”&#xff0c;自己的软件开发出来后自己都不会用那么还要指望别人用不成&#xff1f; 2.在软件开发编写代码的时候&#xff0c;当你把系统的一块新部件放进去…

《JavaScript高级程序设计》chapter 1: javascript 简介

1.2.2 文档对象模型DHTML的出现让开发人员无需重新加载页面就可以修改其外观了。1.2.3 浏览器对象模型&#xff08;BOM&#xff09;BOM真正与众不同的地方在于他作为javascript实现的一部分&#xff0c;但是却没有相关的标准。这些问题咋html5中得到解决。人们习惯上把所有针对…

nginxlua文件服务器权限,通过lua进行nginx的权限控制

nginx_lua的安装nginx使用luajit进行编译安装使用openresty进行yum安装openresty中将lua和nginx进行封装&#xff0c;详情可查看openresty官网openresty相关启动命令service openresty startngx_lua的相关api使用说明及相关使用ngx_lua的日常使用场景ngx_lua的执行顺序&#xf…

WINCC访问OPC服务器显示叹号,本机浏览opcserver.wincc ,无法打开-工业支持中心-西门子中国...

WinCC OPC服务器和OPC客户机之时的数据交换通过DCOM进行。安装WinCC后&#xff0c;WinCC OPC服务器的DCOM要设置正确。如下情况设置必须改变&#xff1a;? 如果登记到OPC客户机或服务器计算机的用户没有管理员员限? 如果用不同于OPC客户机的帐号登记OPC服务器。注意下列说明描…

CSS3 选择器 基本选择器介绍

CSS是一种用于屏幕上渲染html&#xff0c;xml等一种语言&#xff0c;CSS主要是在相应的元素中应用样式&#xff0c;来渲染相对应用的元素&#xff0c;那么这样我们选择相应的元素就很重要了&#xff0c;如何选择对应的元素&#xff0c;此时就需要我们所说的选择器。选择器主要是…

逆水寒7月19服务器维护,逆水寒7月19日更新维护公告 更新内容汇总

3. 战斗体验优化&#xff1a;1) 优化了动作模式下Alt数字快捷键选择队友的操作&#xff0c;我们已经安排大量策划专注使用3D模式和动作模式&#xff0c;后续将继续优化部分技能在3D模式下的易用性。2) 大幅提升部分日常副本的可视距离&#xff0c;现在可看到更远处的…

Linux下ejabberd安装配置

为什么80%的码农都做不了架构师&#xff1f;>>> Linux下ejabberd安装配置 1、下载Ejabberd安装包 wget http://www.process-one.net/downloads/ejabberd/2.1.13/ejabberd-2.1.13-linux-x86_64-installer.run 也可以在直接在官网上下载 ejabberd-15.11-linux-x86…

unity5, custom PBS shader

unity5中引入了基于物理着色(PBS)的Standard shader。由于这种着色器通过调节参数和贴图可逼真模拟各种硬质表面&#xff0c;所以不必再像unity4时代那样需要对各种质感材质单独编写着色器&#xff0c;而且能得到更好的效果(参考&#xff1a;http://docs.unity3d.com/Manual/sh…

win服务器文件夹权限设置密码,win服务器 文件夹权限设置

win服务器 文件夹权限设置 内容精选换一换开发过程中&#xff0c;您有任何问题可以在github上提交issue&#xff0c;或者在华为云对象存储服务论坛中发帖求助。接口参考文档详细介绍了每个接口的参数和使用方法。在OBS中&#xff0c;用户操作的基本数据单元是对象。OBS PHP SDK…

Java定时任务以及ScheduledThreadPoolExecutor需要注意的问题

Java提供Timer和ScheduledThreadPoolExecutor两个类实现定时任务&#xff0c;其中Timer简单易用&#xff0c;但所有任务都是由同一个线程来调度&#xff0c;任务串行执行&#xff0c;任务之间存在互相干扰&#xff0c;一是前一个任务的延迟会导致后面的任务延迟&#xff0c;二是…

重启php-fpm的方法

ps -ef|grep "php-fpm: master process"|grep -v grep|awk {print $2}|xargs kill -USR2 优点&#xff1a;简单&#xff0c;无需写脚本。无需依赖其他工具缺点&#xff1a;不能区分池子&#xff0c;不够精准转载于:https://www.cnblogs.com/yaoyi/p/4398636.html

手机文件管理ftp服务器,ftp工具手机版(ftp文件传输管理工具)V1.0.2 手机版

ftp工具手机版(ftp文件传输管理工具)是一款非常实用的ftp文件管理应用工具。主要作用是将手机ftp上的文件数据快速传输到电脑上&#xff0c;或者将电脑上的文件传输到手机上&#xff0c;实现双向传输&#xff0c;并且传输速度十分快&#xff0c;ftp工具是一款很专业的传输软件&…

Android 获得ImageView中Image的绘制大小

2019独角兽企业重金招聘Python工程师标准>>> ImageView在显示图片的时候&#xff0c;受限于屏幕大小&#xff0c;和图片宽高。通常图片是被缩放过&#xff0c;且不是宽和高都充满ImageView的。 此时&#xff0c;我们如何获得Image被实际绘制的宽高呢&#xff1f; //…

Quartz2D指定显示范围

在qq中&#xff0c;可以看到头像是圆形显示的&#xff0c;通过CGContextClip可以设置 CGContextRef contextUIGraphicsGetCurrentContext();CGContextAddEllipseInRect(context, CGRectMake(100, 100, 100, 100));CGContextClip(context);UIImage *img[UIImage imageNamed:&quo…

当前系统时间与服务器时间,操作系统时间和服务器时间

操作系统时间和服务器时间 内容精选换一换文章目录计算机操作系统(一)1 操作系统的目标和作用1.1 操作系统的目标 1.2 操作系统的目标 2 操作系统的发展历程2.1 未配置操作系统的计算机2.2 单道批处理系统2.3 多道批处理系统2.4 分时系统2.5 实时系统 3 操作系统的基本特性3.1 …

【学神-RHEL7】1-3-Linux基本命令和配置服务器来电后自动开机

本节所讲内容&#xff1a;Linux终端介绍Shell提示符Bash Shell基本语法基本命令的使用&#xff1a;ls、pwd、cd查看系统和BIOS硬件时间Linux如何获得帮助Linux关机命令&#xff1a;shutdow、init等Linux 7个启动级别创建一个方便快捷实验环境快照设置服务器在来电后自动开机Lin…

服务器节点信息管理,华为云管理节点服务器

华为云管理节点服务器 内容精选换一换不想看文字&#xff0c;请直接戳视频链接。可以不做备案吗&#xff1f;根据《互联网信息服务管理办法》等相关规定&#xff0c;使用中国大陆节点服务器开办的网站&#xff0c;必须先办理网站备案&#xff0c;备案成功并获取通信管理局下发的…