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)

);

}

}

非常简单，检查值是不是０，然后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对您有帮助。