Jquery实现无刷新DropDownList联动实现代码

被遗弃的sevent

被遗弃的sevent

2016-02-19 13:32

有了下面这个Jquery实现无刷新DropDownList联动实现代码教程,不懂Jquery实现无刷新DropDownList联动实现代码的也能装懂了,赶紧get起来装逼一下吧!
先看HTML,我们引用Jquery,放两个DropDownList:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
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 runat="server" AppendDataBoundItems="true"
asp:ListItem Text="(Please Select)" Value="0" Selected="True" /
/asp:DropDownList
asp:DropDownList runat="server"
/asp:DropDownList

接着写核心的Script:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
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:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
public partial class _Default : System.Web.UI.Page
{
[WebMethod]
public static ListEmployeeCar 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:

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
public class EmployeeCar
{
public int Id { get; set; }
public string Car { get; set; }

private static ListEmployeeCar LoadData()
{
return new ListEmployeeCar
{
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 ListEmployeeCar 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 ListEmployee FetchEmployees()
{
return new ListEmployee
{
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对您有帮助。
展开更多 50%)
分享

猜你喜欢

Jquery实现无刷新DropDownList联动实现代码

Web开发
Jquery实现无刷新DropDownList联动实现代码

Jquery+JSon 无刷新分页实现代码

Web开发
Jquery+JSon 无刷新分页实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery select操作的日期联动实现代码

Web开发
jquery select操作的日期联动实现代码

jquery pagination插件实现无刷新分页代码

Web开发
jquery pagination插件实现无刷新分页代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 遮罩层实现(mask)实现代码

Web开发
JQuery 遮罩层实现(mask)实现代码

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

VisualBasicCommonDialog控件的使用二

VisualBasicCommonDialog控件的使用二

JQuery 插件制作实践 xMarquee插件V1.0

JQuery 插件制作实践 xMarquee插件V1.0
下拉加载更多内容 ↓