Jquery实现无刷新DropDownList联动实现代码
Jquery实现无刷新DropDownList联动实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:先看HTML,我们引用Jquery,放两个DropDownList:复制代码代码如下:#ddlEmployeeCars{display:no...

先看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教程学习
热门Javascript教程学习
编程开发子分类