Jquery는 새로 고침이 필요 없는 DropDownList 연결 구현 code_jquery를 구현합니다.

먼저 HTML을 살펴보고 두 개의 DropDownList를 넣어 보겠습니다.

코드를 복사합니다. 코드는 다음과 같습니다. #ddlEmployeeCars { display:none top:50px; 🎜>왼쪽:9px; }

그런 다음 핵심 스크립트를 작성합니다.

코드 복사 코드는 다음과 같습니다. $(function() { var $ddl = $(" select[name$=ddlEmployee]"); var $ddlCars = $("select[name$=ddlEmployeeCars]") $ddl.focus(); 🎜>$ddl.bind("change keyup", function() { if ($(this).val() != "0") { loadEmployeeCars($("선택 옵션:선택") .val()); $ddlCars.fadeIn("느림"); } else { $ddlCars.fadeOut("느림") } });

function loadEmployeeCars(selectedItem) { $.ajax({ type: "POST", url: "Default.aspx/FetchEmployeeCars", data : "{id: " selectedItem "} ", contentType: "application/json; charset=utf-8", dataType: "json", async: true, success: 함수 성공(데이터) { printEmployeeCars(data.d); } }) }

function printEmployeeCars(data) { $("select[name $=ddlEmployeeCars] > option") .remove(); for (var i = 0; i $("select[name$=ddlEmployeeCars]"). 추가( $("&lt ;option> ").val(data[i].Id).html(data[i].Car) } } </script&gt ;

아주 간단합니다. 값이 0인지 확인한 다음 ajax를 통해 값을 서버에 전달합니다. 원래 옵션을 제거하고 추가합니다. 새로운 옵션 웹페이지 코드 보기:

코드 복사 코드는 다음과 같습니다. 공용 부분 클래스 _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 직원 = 새 직원(); ddlEmployee.DataSource = 직원.FetchEmployees(); ddlEmployee.DataTextField = "성" ddlEmployee.DataValueField; >ddlEmployee.DataBind(); } } }

데이터 소스 클래스:

코드 복사

코드는 다음과 같습니다. public class EmployeeCar { public int Id { get; 세트; } 공개 문자열 Car { get; 세트; }

비공개 정적 목록 LoadData() { 새 목록 반환 { 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"}, 새 EmployeeCar {Id = 3, Car = "Ferrari"}, 새 EmployeeCar {Id = 3, Car = "Porsche"}, 새 EmployeeCar {Id = 3 , 자동차 = "Ford2"} }; }

공개 목록 FetchEmployeeCars(int id) { return (from p in LoadData() where p.Id == id select p).ToList(); } }

public class Employee { public int Id { get; 세트; } 공개 문자열 GiveName { get; 세트; } 공개 문자열 성 { get; 세트; }

공개 목록 FetchEmployees() { 새 목록 반환 { 새 직원 {Id = 1, GiveName = "Tom", Surname = "Hanks"}, 새 직원 {Id = 2, GiveName = "Hugh", Surname = "Jackman"}, 새 직원 {Id = 3, GiveName = "Petter", 성 = "Liu"} }; }

public Employee FetchEmployee(int id) { var 직원 = FetchEmployees(); return (직원의 p에서 여기서 p.Id == id p를 선택).First(); } } 完了。希望这篇POST对您有帮助。