快捷導(dǎo)航

Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼

更新時間：2010年03月08日 18:07:11 作者：

隨著Jquery1.4的發(fā)布，Jquery運用越來越多了，讓我們來實現(xiàn)以前經(jīng)常用到的DropDownList無刷新聯(lián)動。

先看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:

復(fù)制代碼代碼如下:

 
<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> 

非常簡單，檢查值是不是０，然后ajax傳值到server，成功后remove掉原來的option,append新的option.
看下WebPage的code:

復(fù)制代碼代碼如下:

 
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:

復(fù)制代碼代碼如下:

 
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(); 
} 
} 